javascript - D3更新数据就错误吧

Question

我想通过点击更新数据，但正在更改的条形图不正确。有一些问题我无法通过选择来解决。单击灰色条(应该是 bar2)正在更新。应该是吧。

示例:https://jsfiddle.net/Monduiz/kaqv37gu/

D3 图表:

var values = feature.properties;
var data = [
    {name:"Employment rate",value:values["ERate15P"]},
    {name:"Participation rate",value:values["PR15P"]},
    {name:"Unemployment rate",value:values["URate15P"]}
];

var margin = {top: 70, right: 50, bottom: 20, left: 50},
    width = 400 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom,
    barHeight = height / data.length;

// Scale for X axis
var x = d3.scale.linear()
    .domain([0, 100]) //set input to a scale of 0 - 1. The index has a score scale of 0 to 1. makes the bars more accurate for comparison.
    .range([0, width]);

var y = d3.scale.ordinal()
    .domain(["Employment rate", "Participation rate", "Unemployment rate"])
    .rangeRoundBands([0, height], 0.2);

var svg = d3.select(div).select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .classed("chartInd", true);

var bar2 = svg.selectAll("g.bar")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

var bar = svg.selectAll("g.bar")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });


bar2.append("rect")
    .attr("height", y.rangeBand()-15)
    .attr("fill", "#EDEDED")
    .attr("width", 300);


bar.append("rect")
    .attr("height", y.rangeBand()-15)
    .attr("fill", "#B44978")
    .attr("width", function(d){return x(d.value);});

bar.append("text")
    .attr("class", "text")
    .attr("x", 298)
    .attr("y", y.rangeBand() - 50)
    .text(function(d) { return d.value + " %"; })
    .attr("fill", "black")
    .attr("text-anchor", "end");

bar.append("text")
    .attr("class", "text")
    .attr("x", function(d) { return x(d.name) -5 ; })
    .attr("y", y.rangeBand()-50)
    //.attr("dy", ".35em")
    .text(function(d) { return d.name; });

d3.select("p")
            .on("click", function() {
                //New values for dataset
                var values = feature.properties;
            var dataset = [
                            {name:"Employment rate",value:values["ERate15_24"]},
                            {name:"Participation rate",value:values["PR15_24"]},
                            {name:"Unemployment rate",value:values["URate15_24"]}
                          ];
                //Update all rects
                var bar = svg.selectAll("rect")
                   .data(dataset)
                   .attr("x", function(d){return x(d.value);})
                   .attr("width", function(d){return x(d.value);})
                   });

    }

Answer 1

var bar2 = svg.selectAll("g.bar")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

var bar = svg.selectAll("g.bar")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

上面的“bar2”生成 3 个新的 g 元素(每个数据一个)

由于你没有为这些设置 attr("class","bar") ，那么 'bar' 也会生成 3 个新的 g 元素 - (如果你设置了 class 属性 bar 将返回空，因为没有新元素会被生成，你会看到丢失的东西)

进一步向所有这些 g 元素添加矩形，总共六个矩形，然后在单击函数中选择所有这些矩形并重新附加 3 个新数据位

由于首先添加了 bar2，其 g 元素中的矩形正在吸纳新数据

您需要在 g 元素上选择并设置不同的类，.selectAll("g.bar") 和 .attr("class", "bar") 对于 bar，以及 .selectAll("g.bar2")和 bar2 的 .attr("class", "bar2") (使用相同的名称以保持简单)

然后在新数据中，您只需要选择属于 bar 类的 g 元素的矩形: svg.selectAll(".bar rect")

另一种方法是只有一组 g 元素并添加两种类型的矩形(通过类属性区分)