Question

我正在尝试在d3.js v5中创建分组的条形图，但停留在迭代多维数据上。不幸的是，我没有找到任何满足我需求的例子。我的数据：

var data = [
    {country:'country1', industry:'industry1', parameter:'parameter1', year:2001, value:111},
    {country:'country1', industry:'industry2', parameter:'parameter1', year:2001, value:121},
    {country:'country1', industry:'industry3', parameter:'parameter1', year:2001, value:131},
    {country:'country2', industry:'industry1', parameter:'parameter1', year:2001, value:211},
    {country:'country2', industry:'industry2', parameter:'parameter1', year:2001, value:221},
    {country:'country2', industry:'industry3', parameter:'parameter1', year:2001, value:231},

    {country:'country1', industry:'industry1', parameter:'parameter1', year:2002, value:111},
    {country:'country1', industry:'industry2', parameter:'parameter1', year:2002, value:121},
    {country:'country1', industry:'industry3', parameter:'parameter1', year:2002, value:131},
    {country:'country2', industry:'industry1', parameter:'parameter1', year:2002, value:211},
    {country:'country2', industry:'industry2', parameter:'parameter1', year:2002, value:221},
    {country:'country2', industry:'industry3', parameter:'parameter1', year:2002, value:231},

    {country:'country1', industry:'industry1', parameter:'parameter1', year:2003, value:111},
    {country:'country1', industry:'industry2', parameter:'parameter1', year:2003, value:121},
    {country:'country1', industry:'industry3', parameter:'parameter1', year:2003, value:131},
    {country:'country2', industry:'industry1', parameter:'parameter1', year:2003, value:211},
    {country:'country2', industry:'industry2', parameter:'parameter1', year:2003, value:221},
    {country:'country2', industry:'industry3', parameter:'parameter1', year:2003, value:231}
];

我期望的结果是：X轴上的2001、2002、2003年。每年有6条-所有对是contry-industry。

所以我制作了svg，轴等子组-都很好：

let subgroups = ['country', 'industry'];
let margin = {top: 30, right: 30, bottom: 30, left: 30};
let width = 600;
let height = 400;

let svg = d3.select("#mychart")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");

let xBar = d3.scaleBand()
            .domain(data.map(function(d) { return d.year; }))
            .rangeRound([0, width])
            .padding([0.2]);
svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xBar));
let yBar = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return +d.value; })])
            .rangeRound([ height, 0 ]);
svg.append("g")
            .call(d3.axisLeft(yBar));

let xBarSubgroup = d3.scaleBand()
            .domain(subgroups)
            .range([0, xBar.bandwidth()])
            .padding([0.05]);

但是可见的结果是每年只有1条：所有6条都在一个位置：

svg.selectAll(".bar")
            .data(data)
            .enter().append("g")
            .attr("transform", function(d) {
                return "translate(" + xBar(d.year) + ",0)";
            })
            .selectAll("rect")
            .data(function(d) {
                return subgroups.map(function(key) {
                    return {key: d[key], value: d.value};
                });
            })
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xBarSubgroup(d.key); })
            .attr("y", function(d) { return yBar(d.value); })
            .attr("width", xBarSubgroup.bandwidth())
            .attr("height", function(d) {
                return height - yBar(d.value);
            });

这里是jsfiddle

可能我错过了thansform在某个地方，并且还需要设置条的宽度。请帮忙？！

带有多维数据的d3.js分组条形图

0 个答案: