Tag: d3.js

如何使用d3.js选择器删除处理程序

我使用我正在更新的d3选择器意外地将相同的事件处理程序覆盖在svg元素之上。 add_listeners = function() { d3.selectAll(“.nodes”).on(“click”, function() { //Event handler to highlight clicked d3 element }); jQuery(‘#some_navigation_button’).on(‘click’, function() { //Event handler }); jQuery(‘#some_refresh_button’).on(‘click’, function() { //Event handler that re-draws some d3 svg elements }); //… 5 other navigation and d3 handlers } add_listeners()正在重新添加相同的处理程序。 所以我试过了 add_listeners = function() { d3.selectAll(“.nodes”).off(); jQuery(‘#some_navigation_button’).off(); jQuery(‘#some_refresh_button’).off(); d3.selectAll(“.nodes”).on(“click”, function() { //Event […]

D3可重用图表function创建多个图表

我已经构建了一个可重复使用的图表function（给Mike Bostock提示 – http://bost.ocks.org/mike/chart/ ）： function chartBubble() { var width = 800, height = 800; function chart() { var svg = d3.select(“#chart”).append(“svg”) .attr(“width”, width) .attr(“height”, height); // generate rest of chart here } chart.width = function(value) { if (!arguments.length) return width; width = value; return chart; }; return chart; } 这通过调用函数初始化很好： d3.csv(“data.csv”, function (data) { […]

更新D3图表导致重复的图表

我有一段时间试图在点击按钮后将JSON数据更新为D3直方图。 当我解决按钮点击更新问题时，D3 javascript现在每个按钮点击附加一个图表，导致重复的图表而不是简单地更新数据。 我知道每次触发时，click事件都会在D3代码中调用append() ，但是我如何解决这个问题呢？因此每个点击只有一个图表包含更新的数据？ console.log(‘chart.js loaded’); $(document).ready(function() { var vimeoVideoId = $(‘p#vimeoVideoId’).text(); var api = ‘http://localhost:3001/videos/’ + vimeoVideoId + ‘/json’; function initData() { $(‘#all-notes’).click(function() { getData(); }); } function getData() { $.getJSON(api, draw); } function draw(json) { data = json; var duration = data.duration; var timeToSec = function(data) { notes = []; // convert […]

d3.js中多行的动态工具提示

我正在构建一个复杂的多线图，包括缩放，刷子，复选框等。我能够完成所有工作，但坚持让工具提示工作。 我想得到这样的东西 http://bl.ocks.org/benjchristensen/2657838 具有特定x坐标的所有路径值的行 var vertical = d3.select(“#main-graph”) .append(“div”) .attr(“class”, “remove”) .style(“position”, “absolute”) .style(“z-index”, “19”) .style(“width”, “1px”) .style(“height”, “380px”) .style(“top”, “10px”) .style(“bottom”, “30px”) .style(“left”, “0px”) .style(“background”, “#fff”); d3.select(“#main-graph”) .on(“mousemove”, function(){ mousex = d3.mouse(this); mousex = mousex[0] + 220 ; vertical.style(“left”, mousex + “px” )}) .on(“mouseover”, function(){ mousex = d3.mouse(this); mousex = mousex[0] +220 ; vertical.style(“left”, […]

D3.js：删除动态添加的饼图切片

我能够生成饼图并根据用户交互动态地向其添加数据。 这是小提琴http://jsfiddle.net/L5Q8r/ 我面临的问题是从饼图中删除数据。 取消选中该复选框后，我将从“数据集”中删除数据并更新图表。 图表正在更新，但用户仍然可以看到之前的“切片”。 我尝试添加“.exit（）。remove（）”但没有成功。 这是我做的： var updateChart = function (dataset) { arcs.data(pie(dataset)) .enter() .append(“path”) .attr(“stroke”, “white”) .attr(“stroke-width”, 0.8) .attr(“fill”, function (d, i) { return color(i); }) .attr(“d”, arc); arcs.data(pie(dataset)).exit().remove(); // Executing but not working arcs.transition() .duration(duration) .attrTween(“d”, arcTween); sliceLabel.data(pie(dataset)); sliceLabel.transition() .duration(duration) .attr(“transform”, function (d) { return “translate(” + (arc.centroid(d)) + “)”; }) .style(“fill-opacity”, […]

带日期的D3平移图表

我试图获得一个基于多行日期的图表，以便在X日期轴上很好地平移，我根本无法弄清楚问题是什么。 我在代码中设置了缩放行为，但它没有按预期执行。 如果单击一行中的一个点并滚动它似乎是滚动轴，如果它单击轴上的标签它也会滚动但实际的数据可视化不会滚动。 var zoom = d3.behavior.zoom() .x(x) .scaleExtent([1, 1]) .on(“zoom”, function () { svg.select(“.x.axis”).call(xAxis); svg.select(“.lines”).call(xAxis); }); svg.call(zoom); 此外，如果您直接点击背景，鼠标事件似乎根本不会让它完全通向控件。 我在这里读了几个例子，每个人都采用了一种截然不同的方法，我已经尝试过，但没有一个方法可以用于我的图表。 可能存在许多问题作为使这种工作成为障碍，因此我认为解释问题的最佳方式是在JsFiddle中。 D3图表平移小提琴 我想要实现的是当有大量数据可视化时，图表可以适应数据集并允许数据超出图表的范围。

在为D3.js转换数据时使用forEeach（）循环的替代方法

我仍在努力解决这个错误，正如之前在StackOverflow.com上发布的post所示 。 我已经隔离了问题的原因，在我的D3.js代码中，它无法遍历“对象”。 我的原始数据源是RESTful web api。 使用jQuery和JavaScript函数，我可以将值加载到名为“dataset”的变量中。 当我将’dataset’的内容输出为警报，或者使用jQuery将其写入html元素时，所有数据都在那里。 太多D3.js示例使用硬编码的数据文件。 因此，重要的是要注意当我使用相同数据的硬编码版本时，一切正常，但我只能使用这个动态的虚拟数据变量。 当我运行代码时，它会在此函数崩溃： dataset.forEach（function（d）{ d.theTime = parseDate（d.theTime）; d.theValue = + d.theValue; }）; 错误消息是Uncaught TypeError: Cannot read property ‘length’ of undefined 。 当我在这个函数之前使用console.log(typeof(dataset)) ，我得到’object’。 如果有任何D3.js导师在阅读此信息，我可以选择转换这些数据吗？ 我已经探索了几个没有成功。 // =============附上01 ======================== 因为这里要求的是“数据集”，可以在上面的后期链接（ 使用D3.js解析时间序列数据 ）中查看： var dataset = [ {‘theTime’：’2016/07/12 15:58:40’，’theValue’：1123.07275390625}， {‘theTime’：’2016/07/12 16:21:10’，’theValue’：1055.6793212890625}， {‘theTime’：’2016/07/12 16:45:40’，’theValue’：962.4850463867188}， {‘theTime’：’2016/07/12 17:14:40’，’theValue’：831.2259521484375}， {‘theTime’：’2016/07/12 17:55:10’，’theValue’：625.3046875} ]。 // […]

如何在d3.js中的svg中拖放一组矩形？

我基于这个拖放示例工作： 我想拖一组。 我将两个矩形放在单个组中，现在想要拖放整个组，在我的代码中拖放工作在单个矩形上但不在组上。 这是我的代码： Drag And Drop var vizSVG = d3.select(“#viz”) .append(“svg”) .attr(“width”, 400) .attr(“height”, 300); var group =d3.select(“svg”) .append(“g”) .attr(“id”,”group1″) .attr(“x”,50) .attr(“y”, 140) //.attr(“fill”, “yellow”) // .call(d3.behavior.drag().on(“drag”, move)); group.append(“rect”) .attr(“id”, “bluerect”) .attr(“x”, 50) .attr(“y”, 140) .attr(“width”, 50) .attr(“height”, 50) .attr(“stroke”, “red”) .attr(“fill”, “blue”) .attr(“opacity”,”0.5″) .call(d3.behavior.drag().on(“drag”, move)); group.append(“rect”) .attr(“id”, “redrect”) .attr(“x”, 110) .attr(“y”, 140) .attr(“width”, […]

ReactJS componentDidMount + render

我目前正在使用react来创建d3可视化。 我对render和componenetDidMount方法之间的关系有点困惑（方法是正确的术语吗？）。 这就是我所拥有的（为简单起见，我排除了一些代码）： var Chart = React.createClass({ componentDidMount: function () { var el = this.getDOMNode(); console.log(el); d3Chart.create(el, { width: ‘500’, height: ‘300’ }, this.getChartState(),this.getAccessState); }, render: function () { return ( ); } } 在第3行， el被赋予this.getDOMNode(); 它始终指向渲染函数中的顶级元素（ div “row pushdown” ）。 那么this.getDOMNode()总是引用渲染函数中的顶级元素吗？ 我实际上要做的是在最里面的div （ .Chart ）中渲染d3图表。 我首先尝试这样做this.getDOMNode().find(‘.Chart’)但是没有用。 第一个问题：我知道我不应该尝试触摸真正的DOM，但是如何在VirtualDOM上选择更多内容呢？ 第二个问题：我知道，鉴于我对此很陌生，我可能做错了。 你能建议一个更好的方法吗？ 第三个问题：我想在”.Chart”的兄弟div中添加一个图表图例。 我应该为此创建一个新组件吗？ 或者在我的d3Chart中，我可以使用选择器来执行此操作吗？ 预先感谢您的帮助！ PS我有一个问题： […]

D3.js可折叠树 – 展开/折叠节点

我有一个D3.js可折叠树，它有一堆节点，如下图所示 现在我想在展开节点时折叠所有其他节点。 例如，如果analytics node被扩展，那么它应该折叠data node 。 我正在引用D3.js可折叠树 – 展开/折叠中间节点，但它没有多大帮助。