Tag: d3.js

使用–AJAX更新d3图表的最佳方法是什么？: 我已经学会了几个d3块。我在jquery的帮助下做了一个响应式d3直方图。现在我想要使用ajax更新d3图表。我刚刚进入jquery。并了解ajax的工作原理。搜索了很长时间但我无法在官方d3网站或其他任何地方获得任何有用的示例。任何帮助对我来说都很有成效，可以通过ajax获得更新d3图表的基本function。提前致谢！！

如何在D3中模拟鼠标移动，这样当你拖动节点时，其他节点会自动移动？: 我有一个粘力布局： http ： //jsfiddle.net/smqsusdw/ 我有这个函数将一个节点拖动到一个位置： function positionnodes(){ force.stop(); node.each(function(d, i){ if(i===1){ d.fixed = true; dx = 100; dy = 100; } }).transition().duration(1000).attr(“cx”, function(d){ return dx }).attr(“cy”, function(d){ return dy }); link.transition().duration(1000) .attr(“x1”, function (d) { return d.source.x; }) .attr(“y1”, function (d) { return d.source.y; }) .attr(“x2”, function (d) { return d.target.x; }) .attr(“y2”, function (d) […]

可折叠力导向图上的D3.js标题: 所以我一直在研究基于以下示例的可折叠力导向图。我试图从那里前进，并为每个节点添加标题。我在stackoverflow上遵循了类似的答案，但是我无法将该答案的解决方案实现到上面的示例和其他类似的解决方案中。请有人指出我正确的方向。实施前请参阅下面的项目代码。 JS var w = 600, h = 600, radius = 10, node, link, root; var force = d3.layout.force() .on(“tick”, tick) .charge(function(d) { return -500; }) .linkDistance(function(d) { return d.target._children ? 100 : 50; }) .size([w, h – 160]); var svg = d3.select(“body”).append(“svg”) .attr(“width”, w) .attr(“height”, h); root = words[0]; […]

dc.js – 使用jquery数据表插件的数据表: 我正在使用dc.js来创建图表和数据表。我想在表格中添加一些分页样式和搜索选项。 jQuery数据表脚本： $(document).ready(function() { $(‘#data-table’).DataTable(); }) 问题是 – 我得到的所有jquery数据表选项显示为搜索框，条目数。但它们都不起作用。有人请帮忙。发现这篇文章。但没什么用。

D3相当于jQuery Attribute选择器: 有谁知道d3相当于jQuery属性选择器： $(‘[attribute=”name”]’) 我希望能够使用d3方法，如.transition（）。谢谢！

将平面JSON文件转换为分层json数据，如flare.json: 在一场麻烦的战斗后，我几乎想到了如何将平面json文件转换为Hierarchical文件。我没有自己编写这个函数。我从下面的post中复制了它。 D3 JSON数据转换但现在问题是，在post中写的函数只有2级层次结构。但我正在寻找4级层次结构。我试图覆盖我失败的function但是。代码与我正在尝试。 var data = [ {“dep”：“First Top”，“name”：“First child”，“model”：“value1”，“size”：“320”}， {“dep”：“First Top”，“name”：“First child”，“model”：“value2”，“size”：“320”}， {“dep”：“First Top”，“name”：“First child”，“model”：“value3”，“size”：“320”}， {“dep”：“First Top”，“name”：“First child”，“model”：“value4”，“size”：“320”}， {“dep”：“First Top”，“name”：“SECOND CHILD”，“model”：“value1”，“size”：“320”}， {“dep”：“First Top”，“name”：“SECOND CHILD”，“model”：“value2”，“size”：“320”}， {“dep”：“First Top”，“name”：“SECOND CHILD”，“model”：“value3”，“size”：“320”}， {“dep”：“First Top”，“name”：“SECOND CHILD”，“model”：“value4”，“size”：“320”}， {“dep”：“Second Top”，“name”：“First Child”，“model”：“value1”，“size”：“320”}， {“dep”：“Second Top”，“name”：“First Child”，“model”：“value2”，“size”：“320”}， {“dep”：“Second Top”，“name”：“First Child”，“model”：“value3”，“size”：“320”}， {“dep”：“Second Top”，“name”：“First Child”，“model”：“value4”，“size”：“320”}， {“dep”：“Second Top”，“name”：“SECOND CHILD”，“model”：“value1”，“size”：“320”}， {“dep”：“Second Top”，“name”：“SECOND CHILD”，“model”：“value2”，“size”：“320”}， […]

将状态名称添加到d3.js中的地图中: 我正在使用albersUSA投影来显示地图。我想为每个州添加州的名称。这是我尝试过的，我可以在源代码中看到状态的名称，但我看不到它们的渲染。我究竟做错了什么？ var width = 1060, height = 600, var svg = d3.select(“body”).append(“svg”) .attr(“width”, width) .attr(“height”, height); svg.append(“rect”) .attr(“class”, “background”) .attr(“width”, width) .attr(“height”, height) .on(“click”, click) .on(“mousemove”, mousemove); var g = svg.append(“g”) .attr(“transform”, “translate(” + width / 2 + “,” + height / 2 + “)”) .append(“g”) .attr(“id”, “states”); var projection = d3.geo.albersUsa() […]

具有鼠标hover工具提示的多重系列折线图: 我使用这个bl.ocks.org代码示例创建了一个多系列折线图。我已经设法在JSFiddle上重新创建它。现在，我正在尝试添加一个x值鼠标hover工具提示，当您hover其垂直位置时，它会显示每行的工具提示。这样的东西，但多行。我发现这个StackOverflow答案（它包括一个JSFiddle ），但我似乎无法使它与我的多重系列折线图一起工作。 svg.append(“path”) // this is the black vertical line to follow mouse .attr(“class”,”mouseLine”) .style(“stroke”,”black”) .style(“stroke-width”, “1px”) .style(“opacity”, “0”); var mouseCircle = causation.append(“g”) // for each line, add group to hold text and circle .attr(“class”,”mouseCircle”); mouseCircle.append(“circle”) // add a circle to follow along path .attr(“r”, 7) .style(“stroke”, function(d) { console.log(d); […]