Question

我正在尝试使用enter（），update（），exit（）模式作为折线图，而我没有让我的线条正确显示。

它确实出现在dom中，但没有x或y值（虽然它们的样式）

我的svg已经按如下方式创建：

var chart = d3.select("#charts")
              .append("svg")
chart
    .attr("width", attributes.chartsWidth)
    .attr("height", attributes.chartsHeight);

我想为更新绑定创建一个新对象，如下所示：

var thechart = chart.selectAll("path.line").data(data, function(d){return d.x_axis} )

        thechart.enter()
            .append("path")


        thechart.transition().duration(100).attr('d', line).attr("class", "line");

但这不好。

注意，这确实有效（但不能用于我们的更新）：

chart.append("path")
      .datum(data, function(d){return d.x_axis})
      .attr("class", "line")
      .attr("d", line);

另一个注意事项：

我有一个单独的函数，用于绑定数据以在svg上创建另一个图表。

var thechart = chart.selectAll("rect")
                .data(data, function(d){return d.x_axis});

              thechart.enter()
                .append("rect")
                .attr("class","bars")

这两个绑定是否可以相互作用？

Answer 1

这是我结束的更新逻辑，仍然是一个封闭的模式：

function updateScatterChart(chartUpdate) {

        var wxz = (wx * 37) + c;

        var x = d3.scale.linear()
            .range([c, wxz]);

        var y = d3.scale.linear()
            .range([h, hTopMargin]);

        var line = d3.svg.line()
            .x(function(d) { return x(+d.x_axis); })
            .y(function(d) { return y(+d.percent); }).interpolate("basis");

        if (lastUpdateLine != chartUpdate) {
            console.log('updating..')
            d3.csv("./data/multiline.csv", function(dataset) {


                console.log(chartUpdate);

                var data2 = dataset.filter(function(d){return d.type == chartUpdate});


                x.domain(d3.extent(data2, function(d) { return +d.x_axis; }));
                y.domain([0, d3.max(data2, function(d) { return +d.percent; })]);

                var thechart2 = chart.selectAll("path.line").data(data2, function(d){return d.neighborhood;});

                    thechart2.enter()
                    .append("svg:path")
                    .attr("class", "line")
                    .attr("d", line(data2))


               thechart2.transition()
                    .duration(800)
                    .attr("d", line(data2))
                    .style("opacity", (chartUpdate == 'remove') ? 0 : 1 )

                thechart2.exit()
                    .transition()
                    .duration(400)
                    .remove();


              })
        }
        lastUpdateLine = chartUpdate;

}

使用路径行选择更新模式

1 个答案: