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

-k

上面的

'bar2'生成3个新g元素（每个数据一个）

由于你没有为这些设置attr（“class”，“bar”），那么'bar'也会生成3个新的g元素 - （如果你设置了类属性栏将返回空，因为没有新元素会生成，你会看到缺少的东西）

此外，您将所有这些g元素的rects添加到六个矩形中，并在click函数中选择所有这些矩形并重新附加3个新数据

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

你需要在g元素上选择和设置不同的类，。selectAll（“g.bar”）和.attr（“class”，“bar”）表示bar，和.selectAll（“g.bar2”）和.attr（“class”，“bar2”）for bar2（使用相同的名称保持简单）

然后在新数据中你需要只选择属于bar类的g元素的rects：svg.selectAll（“。bar rect”）

另一种方法是只有一组g元素并添加两种类型的矩形（按类属性区分）

D3在错误的栏上更新数据

1 个答案: