使用路径线选择更新图案

Update pattern with path line selections

本文关键字：更新 选择 路径      更新时间：2023-09-26

我正在尝试为折线图使用enter（）、update（）、exit（）模式，但我无法使线条正确显示。

小提琴的例子。http://jsfiddle.net/wy6h1jcg/

它们确实出现在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")

这两个绑定会相互作用吗？

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

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;
}
相关文章：