Question

我试图在D3中显示单个条形图。我有一个类型的数据：

data = [
  "value1": 1,
  "value2": 2,
  "value3": 3,
]

因为y比例不同，我试图显示三个不同的条形图，每个条形图只有一个条形图。我不需要x轴。

正如你在这个小提琴中看到的那样：http://jsfiddle.net/GPk7s/，条形图没有显示，但是如果你检查了源代码，它就被添加了。我认为这是因为我没有提供x范围，但我不知道如何，因为我不是真的有。

我只想要一个高度与我提供的范围相关的栏（在小提琴例子中这是[10,30]）。

我在这里复制代码以防万一：

var margin = {
top: 50,
right: 0,
bottom: 100,
left: 30
},
width = 200 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;

var data = [{ "Value": 22.5 } ];

var yRange = d3.scale.linear().range([height, 0]);
yRange.domain([10, 30]);

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

svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("y", function (d) {
return yRange(d.Value);
})
.attr("height", function (d) {
return height - yRange(d.Value);
})
.attr("y", function (d) {
return yRange(d.Value) + 3;
})
.attr("dy", ".75em")
.text(function (d) {
return d.Value;
});

感谢您的帮助！

Answer 1

您正在做的事情有两个问题：

1）您的矩形没有宽度。我补充说：

...
.attr("class", "bar")
.attr("width", 10)
.attr("y", function (d) {
...

2）您的数据不是数组。 D3期望使用.data()方法提供数据数组，并且（有效地）data = {Value : 22.5}。我改成了这个：

...
var data = [{'Value' : 22.5}];
...

更新的小提琴是here.

D3中无法显示单个栏

1 个答案: