Question

我写了一个可重复使用的d3折线图（下面的代码）。不幸的是，它只在更新传递给它的数据数组时才能正确更新;如果它传递了一个新的数据数组，它根本不会更新 - 你可以在jsfiddle中看到它。

这是html，主要是嵌入式演示调用脚本：

<style>
  path { stroke: purple; stroke-width: 2px; fill: none; }
</style>
<body>
<div id="demo"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="demoChart.js"></script>
<script>
  var chart = demoChart();
  var pts = [[[0,0],[200,0.25],[500,1]]];

  d3.select("#demo").datum(pts).call(chart);
  setTimeout(function() {
    console.log("Modifying data array");
    pts[0][2][1] = 0.5;
    d3.select("#demo").datum(pts).call(chart);
  },1000);

  setTimeout(function() {
    console.log("Passing new data array");
    d3.select("#demo").datum([[[0,1],[200,0.45],[500,0]]]).call(chart);
  },2000);
</script>

您可以看到第二次调用chart它直接更新数据数组中的单个点（pts[0][3][1] = 0.5），并且图表可以正常设置动画。第三次传递新数据数组时，图表不会改变。

以下是demoChart.js代码（基于reusable charts模式）：

function demoChart() {

    function xs(d) { return xScale(d[0]) }
    function ys(d) { return yScale(d[1]) }

    var xScale = d3.scale.linear().domain([0, 500]).range([0, 400]),
        yScale = d3.scale.linear().domain([0, 1]).range([400, 0]),
        line = d3.svg.line().x(xs).y(ys);

    function chart(selection) {
        selection.each(function(data) {
            console.log("passed data: ", data);

            // Select the svg element, if it exists; otherwise create it
            var svg = d3.select(this).selectAll("svg").data([1]);
            var svgGEnter = svg.enter().append("svg").append("g");

            // Select/create/remove plots for each y, with the data
            var plots = svg.select("g").selectAll(".plot").data(data);
            plots.exit().remove();
            var plotsEnter = plots.enter().append("g").attr("class","plot");
            plotsEnter.append("path");

            // Update the line paths
            plots.selectAll("path")
                .transition()
                    .attr("d", function(d,i) {
                        console.log("transitioning line with data: ", d);
                        return line.apply(this, arguments);
                    });

            svg.attr("width", 400).attr("height", 400);

        });
    }

    return chart;
}

我怀疑我遗漏了关于d3如何工作的基本信息。

如何在传递新数据阵列时正确更新图表？

Answer 1

通过

更新线路径的位置

plots.selectAll("path")

它需要

plots.select("path")

请参阅mbostock's explanation微妙但至关重要的差异。

这里有一个working fiddle，它还添加了第二条路径，以验证它是否适用于绘图。

Answer 2

我今天实际上遇到了同样的问题。所以我可以帮忙。我注意到你正在调用setTimeout来更新你的html中的数据。

看来你在setTimeout里面调用了chart（）。唯一的问题是你没有重置范围。

相反，您应该尝试调用demoChart（），或在图表中添加新范围（）。你的范围是：

function xs(d) { return xScale(d[0]) }
function ys(d) { return yScale(d[1]) }

var xScale = d3.scale.linear().domain([0, 500]).range([0, 400]),
    yScale = d3.scale.linear().domain([0, 1]).range([400, 0]),
    line = d3.svg.line().x(xs).y(ys);

如果这不能解决问题，可能是因为您正在使用两个同时启动每秒的setTimeouts进行更新。所以第二个数据会立即覆盖第一个数据：

setTimeout(function() {
  console.log("Modifying data array");
  pts[0][2][1] = 0.5;
  d3.select("#demo").datum(pts).call(chart);
},1000);

setTimeout(function() {
  console.log("Passing new data array");
  d3.select("#demo").datum([[[0,1],[200,0.45],[500,0]]]).call(chart);
},1000);

以下是我发现有用的文章：http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html

d3线和面积图未使用新数据阵列更新

2 个答案: