Tag: d3.js

D3条形图示例不在本地工作: 我对D3很新，想看看一个例子在本地是如何工作的。我将条形图代码复制并粘贴到一个名为index.html的本地文件，并复制到data.tsv上。出于某种原因，当我在浏览器上打开文件时绝对没有任何东西显示出来！我试图将脚本src更改为“d3 / d3.v3.min.js”，因为这是我下载的d3文件夹。但是，这也不起作用。对于我尝试的每个示例，我都还没有成功查看D3示例。帮助将不胜感激！ index.html代码如下： <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: steelblue; } .x.axis path { display: none; } </style> <body> <script src="d3/d3.v3.min.js"></script> <script> var margin = {top: 20, right: 20, bottom: 30, […]

D3.js组件中的样式不以angular度2显示: 我正在使用Angular 2和D3.js. 我想显示一个红色的矩形。它只适用于style.css文件中的样式。检查这个plunkr 当我把我的样式在组件styles: [] ，它不起作用。检查这个plunkr 当我使用组件styles: []时如何让它工作styles: [] ？谢谢更新： @micronyks提供了一个解决scheme，但它使全局组件中的样式，在style.css文件中写入基本没有区别。在这个plunkr中，它显示一个组件中的样式会覆盖另一个组件的样式，所以不能显示绿色和红色的矩形。更新2： @Günter的方式完全解决这个问题！只是一个提醒，对Günter的方式：它至less需要Angular beta 10。（我的其他plunkrs使用Angular beta 8）使用Angular beta 12的绿色和一个红色矩形的工作演示在这里。 import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], styles: [` /*this does not work*/ .bar { fill: red; } `], template: ` <div> <svg class="chart"></svg> </div> […]

dc.js – 监听图表组渲染: 我试图重构一些自定义d3代码，通过引入dc.js来渲染一系列交叉过滤驱动的图表。我的主要问题是，我有一些不支持dc.js的图表types（例如Sunburst分区），我试图找出如何将它们与dc.js图表组结合使用。过滤单个dc.js图表将自动呈现/重绘属于同一个chartGroup的所有其他图表。是否有可能以某种方式挂钩到全局重新渲染事件中，以便我可以同时重新绘制非直方图？我知道每个图表上都有监听器，例如chart.on("postRender", function(chart){…})但似乎没有办法挂钩重新渲染一chart.on("postRender", function(chart){…})表。有没有一个好的模式可以完成？

input参数如何在javascript方法链中填充？: 我想要真正了解JavaScript的工作原理。在方法链接期间，有时一个方法返回到另一个具有命名input参数的方法。例如，在D3中，模式如下所示： d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d) { return d; }); //what does this d refer to? How is it filled? 在jQuery中，模式看起来像这样： $.ajax({ … }) .done(function( data ) { //what does this data refer to? How is it filled? 我从实际的编码知道，这些input参数的名称可以是任何东西。但是input参数文件的数据来自哪里呢？它只是指从链中的先前方法返回的数据？

如何在D3.js中从起点到终点平滑地绘制path: 我有下面的代码，绘制一个基于正弦函数的线path： var data = d3.range(40).map(function(i) { return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4}; }); var margin = {top: 10, right: 10, bottom: 20, left: 40}, width = 960 – margin.left – margin.right, height = 500 – margin.top – margin.bottom; var x = d3.scale.linear() .domain([0, 1]) .range([0, width]); var y […]

如何转换/保存d3.jsgraphics为pdf / jpeg: 我正在处理客户端/ JavaScript函数来将现有的D3-SVGgraphics保存或转换为文件。我search了很多，发现了一些build议，主要使用canvas.toDataURL() 。我在我的页面没有<canvas> ，而是使用： d3.select("body").append("svg")….我也尝试将SVG追加到<canvas>但没有任何反应。你能帮我解决这个例外： Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL' 谢谢

为什么在v2不执行的时候d3js v3在执行缩放时会破坏我的强制graphics？: 我有一个使用d3.js创build的强制布局我想同时具有可拖动力布局的正常function以及缩放能力。我基本上从这个（ http://jsfiddle.net/nrabinowitz/QMKm3/ ）代码复制/粘贴缩放代码。这与迈克·博斯托克（Mike Bostock）在这个例子中使用的缩放方法是一样的（ http://bl.ocks.org/mbostock/3680957 ）。这是我的代码： http : //jsfiddle.net/kM4Hs/6/ 正如我可以清楚地看到，缩放工作正常，但我无法在力布局中select单个节点，并拖动它们。我已经发现，其他作者都使用d3.v2.js而不是我正在使用的新版本的d3.v3.js。当我改变我的导入到V2，它完美的作品。但是，为了进步和普遍良好的代码性，我想尽可能使用v3。 <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script> versus <script type='text/javascript' src='http://d3js.org/d3.v2.min.js'></script> 两个问题：为什么v3在v2没有时打破力布局，更重要的是，我能做些什么来解决这个问题？提前致谢！

dc.js – 如何从多列创build行图: 我需要在csv中用多个列的input在dc.js中创build一个rowchart。所以我需要映射一列到每一行，每列总数到行值。可能有一个明显的解决办法，但我似乎无法find任何例子。非常感谢S 更新：这是一个快速的草图。道歉的标准行图第1列—————– 64（第1列总数）第2栏——- 35（第2栏共计）第3列———— 45（第3列总数）

在D3 v4中replaced3.transform: 在D3.js v4中，d3.transform方法已被删除，没有提示如何replace它。有谁知道如何replace下面的D3.js v3指令？ d3.transform(String).translate;

从平面json生成（多级）flare.json数据格式: 我有一个平的JSON文件结构，如： [ { "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 }, { "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 }, { "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 } …. …. ] 而我想要的是一个嵌套的文件结构，如： [ { "name": "DEF", "parent": "null", "relation": "null", "children": [ { "name": "ABC", "parent": "DEF", "relation": "ghi", "children": [ […]