javascript - 努力获取修改后的 JSON 格式的图表

Question

我对 d3js 很陌生。我使用一个 json 文件制作了一个条形图。它工作得很好。但现在由于一些不可避免的原因我改变了JSON文件格式。
我以前的json是:

[ 
    {"name":"bike","value":98},
    {"name":"car","value":52},
    {"name":"bus","value":20},
    {"name":"van","value":65} 
] 

代码是:

d3.json("sample.json", function(error, data) {
    x.domain(data.map(function(d) { return d.name; }));
    y.domain([0, d3.max(data, function(d) { return d.value; })]);

    var chart = d3.select("body")
        .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 + ")");

    chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    chart.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    var bar = chart.selectAll(".bar")
        .data(data)
        .enter().append("g");

    bar.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.name); })
        .attr("y", function(d) { return y(d.value); })
        .attr("width", x.rangeBand())
        .attr("height", function(d) { return height - y(d.value); });
});

这是我的新 json 文件:

[ 
    {"category":"bike","bike":38,"car":0,"bus":0,"van":0},
    {"category":"car","bike":0,"car": 50,"bus":0,"van":0,},
    {"category":"bus","bike":0,"car": 0,"bus":14,"van":0},
    {"category":"van","bike":0,"car": 0,"bus":0,"van":43} 
]

我想要一张与上一张相同的图表。带有“0”(零)的数据不应出现在图表中。 请帮助我。预先感谢:)

Answer 1

您没有提供新格式的解释，并且我不确定您以前的格式是如何工作的(给定 x 属性设置)，但调整到新格式应该如下简单如

.attr("x", function(d) { return x(d.category); })
.attr("y", function(d) { return y(d[d.category]); })

其他地方也有类似的变化。 (例如高度)

或者也许我错过了一些东西？