Question

我想在每个栏后面添加另一个rect元素，但我很难做到这一点，因为d3.js不允许我为每个数据点添加另一个元素。

var w = parseInt(d3.select(self).style("width")),
    h = parseInt(d3.select(self).style("height")),

    svg = d3.select(self)
            .append("svg")
            .attr("width", w)
            .attr("height", h),

    yScale = d3.scale.linear()
             .domain([0, d3.max(dataset)])
             .range([0,h]);

svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("fill", "green")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - yScale(d);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d){return yScale(d);});

我尝试添加此功能，但它没有做任何事情。

svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("fill", "black")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - yScale(d);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", "100%");

Answer 1

你可能想要创建一个'g'元素并将rects放在每个'g'元素下。

Parallel.ForEach

http://jsfiddle.net/ermineia/g5hpwf0m/3/

d3.js为每个数据点创建两个元素

1 个答案: