Javascript D3：在我的json中只为一个字符串创建条

我想用json中的一个字符串创建条形图。下面是一个json示例：

var fruits = [{
    kind: "grape",
    color: "red",
    quantity: 12,
    tasty: true
}, {
    kind: "kiwi",
    color: "brown",
    quantity: 98,
    tasty: true
}, {
    kind: "banana",
    color: "yellow",
    quantity: 0,
    tasty: true
}];

现在，我只想在我的图表中为数量创建一个条形图

这是可能的还是应该重新格式化数据

该条的长度应为所有值的平均值。以下是我目前的代码：

d3.select("svg").selectAll("p")
           .data(fruits)
           .enter()
           .append("rect")
           .attr("x", 0)
           .attr("y", 0)
           .attr("width", 20)
           .attr("height", function(d, i) {
                return d3.mean(fruits, function(d) {return d.quantity * 20})
           });

---

这给了我一个长度合适的“一”条。但事实上，由于所有矩形的x=0，三个条相互堆叠在一起。

结果比我想象的要简单得多。我非常专注于使用数据创建svg矩形

我通过简单地向SVG添加一个矩形来解决这个问题

d3.select("svg").append("rect")
       .attr("x", 0)
       .attr("y", 0)
       .attr("width", 20)
       .attr("height", function(d, i) {
            return d3.mean(fruits, function(d) {return d.quantity * 20})
       });

---

如果我以任何方式浪费了您的时间，请原谅。

您需要预处理您的数据。您真的只想绘制一个条形图，还是更像是隐藏其他条形图？第二个选项将使您能够在某些事件上再次显示其他数据。最终，我也会希望使用其他数据，但我仍然只显示一个条。例如，我希望用户能够以只看到葡萄数量的方式过滤数据。