Tag: d3.js

将元素追加到d3.js中的现有元素: 我正在尝试创建一个实时条形图，使用d3.js绘制随时间变化的值这就是我这样做的方式。 var dataset = [ 5, 10, 15, 20, 25 ]; var w = 1800; var h = 500; var barPadding = 1; setInterval(function(){ dataset.push(Math.floor(Math.random()*51)); draw(); },1000); function draw(){ d3.select(“svg”).remove(); var svg = d3.select(“body”) .append(“svg”) .attr(“width”, w) .attr(“height”, h); svg.selectAll(“rect”).data(dataset) .enter() .append(“rect”) .attr(“x”, function(d, i){return 12*i;}) .attr(“y”, function(d){return h -d*4; }) .attr(“width”, 11) .attr(“height”, […]

d3.json（）函数可以获取json对象吗？: 我是JQuery / d3js世界的新手。我想从json格式的数据中绘制一个图表。我看到了一些样本， d3.json(json,f)函数只能获得带有json格式数据的文件。我的问题：是否可以用json格式的对象或字符串调用它，例如： val jsonStr = { “foo” : “bar”} d3.json(jsonStr ,f) 如果没有，我怎么能用动态数据绘制图表（以json格式）

使用Sinon在D3中测试Mouseover事件: 我在试图通过测试时遇到了麻烦。我希望能够使用间谍来检查鼠标hover事件是否被正确调用。目前我收到以下错误，“错误：预计至少被调用一次，但从未被调用过”。我的部分困惑与d3和jQuery选择器之间的差异有关，我非常乐意使用后者，但我不确定如何在测试中正确使用前者来获得我想要的结果。我的依赖是d3，jQuery，mocha，chai，sinon和sinon-chai。我的index.html文件中的相关代码， mocha.ui(‘bdd’); mocha.reporter(‘html’); var expect = chai.expect; mocha.run(); fixtures.js， var path = svg.selectAll(“path”) .data(pie(data)) .enter().append(“path”).attr(“class”, “path”) .style(“fill”, function(d, i) { return color(i); }) .attr(“d”, arc) .on(“mouseover”, function() { d3.select(this).style(“fill”, “#ff0000”); }) .on(“mouseout” , function() { d3.selectAll(“path”).style(“fill”, function(d, i) { return color(i); }); }); // I wanted to test my understanding […]

D3.json将缓存设置为false: 我注意到用json调用（ d3.json ）重绘D3元素不希望在IE9 +上更新。原因是json调用被缓存，因此浏览器不会在新数据传递时注册。正常jQuery ajax调用的解决方法是将其属性设置为cache：false，全局用于所有ajax调用： $.ajaxSetup({ cache: false }); 但是如何将它添加到d3.json调用中，因为它使用自己的方法来调用ajax？我成功地在路径后添加当前时间戳： var noCache = new Date().getTime(); d3.json(data + “?_=” + noCache) 但这样做有点蹩脚……任何建议我怎么能做到这一点？或者更好的是，如果IE正在运行，如何设置这个:)

nvd3工具提示十进制格式: 我正在使用nvd3来显示折线图。在格式化工具提示内容时遇到一些麻烦这是我用来格式化y轴文本的行 chart1.yAxis.tickFormat(d3.format(‘.02f’)); 但是，它仅在y轴上生效。如果有一个像44.123231的值，在y轴上，它将显示为44.12，但在工具提示中，它显示44.00。可能是什么问题？在nvd3中是否有办法格式化工具提示文本？

移动使用D3.js随机创建的圆圈: 我使用D3.js开发了一个Web应用程序，其中有100个圆圈。我希望圆圈稍微移动（随机2px）并且一直平滑。这是我尝试使用jQuery： setInterval(function() { $(‘.circle_Negative’).each(function() { var newq = makeNewPosition(); $(this).animate({ cx: +$(this).attr(“cx”)+newq[0], cy: +$(this).attr(“cy”)+newq[1] },200); }); }, 200); function makeNewPosition() { var nh = Math.floor(Math.random()*2); var nw = Math.floor(Math.random()*2); return [nh,nw]; } 但这根本不顺利。我认为使用D3本身可以有更好的方法，但我想不出多少。

将信息显示到工具提示中: 我这里有一个图表： – 代码链接让我告诉你我在这里想要实现的目标。一年中有几个月的聚线 – 一月，二月，三月……现在当我盘旋几个月时，我想显示第1周，第2周， ….，第4周为1月，第5周，第6周，…，第2周为2月，依此类推。也就是说，每个月我会使用php来回应每周数据的值，如 – week1：23，第2周：45周，第3周：56周，第4周：75等…… 善意的帮助。我试图使用.csv文件将所有52周的信息，但没有运气。 JavaScript涉及： ‘use strict’; var dataset = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; // let colors = [‘#8dd3c7’, ‘#ffffb3’, ‘#bebada’, ‘#fb8072’, ‘#80b1d3’, ‘#fdb462’, ‘#b3de69’, ‘#fccde5’, ‘#d9d9d9’, ‘#bc80bd’]; let colors = [‘#8dd3c7’, ‘#ffffb3’, ‘#bebada’, ‘#fb8072’, ‘#80b1d3’, ‘#fdb462’, ‘#b3de69’, ‘#fccde5’, ‘#d9d9d9’, […]

使用单选按钮显示/隐藏内容: 我有JSONforms的数据，我正在尝试使用D3.js可视化它。我想让用户选择他们查看数据的图形。我试图在两者之间进行平滑过渡，所以我决定用单选按钮来做。这是我得到的： $(document).ready(function () { if ($(“input[name=’chart’]:checked”).val() == ‘pie’) { // … Graph 1 } else if ($(“input[name=’chart’]:checked”).val() == ‘bar’) { // … Graph 2 } }); 的jsfiddle 这显示了加载时检查其单选按钮的图形。但是，当我单击按钮时，它们不会更改。我做了一些研究，发现我可能需要包含change（）函数。这是我尝试过的： $(document).ready(function () { $(“input[name=chart]:radio”).change(function () { if ($(“#chart1Pie”).attr(“checked”)) { // … Graph 1 } else if ($(“#chart1Bar”).attr(“checked”)) { // … Graph 2 […]

删除固定类不会从预设中正确删除它们: 关于：使用jQuery从强制布局节点中删除所有.fixed类我现在可以删除固定类。但节点仍然在视图中固定。因此，我认为简单地删除课程是不够的。我也没有在D3的文档中找到任何帮助。

动画后关注表单字段: 我想在短片d3动画中显示，完成后，会自动选择/聚焦表单字段以获取用户输入。看起来它最好通过链接function来完成。我尝试使用javascript函数focus（）在加载时选择表单字段（“signup”，“inputname”），但这不起作用。动画完成后如何自动选择表单域？ d3.js： selectReady = d3.selectAll(“#ready”) .on(“mouseover”, function(){d3.select(this).style(“color”, “red”);}) .on(“mouseout”, function(){d3.select(this).style(“color”, “black”);}) .on(“mousedown”, animateDisplay); //starts animation with a mousepress function animateDisplay(){ d3.selectAll(“#Display”) .transition() .delay(200) .duration(1000) .style(“color”,”white”) // changes Display to white .each(“end”,selectForm); }; function selectForm(){ d3.select(“#inputname”) .focus(); // remove() works here }; HTML： Click when ready A B C Name