Блог

Я пытаюсь отобразить отдельные столбцы в 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;
});
  

Спасибо за вашу помощь!

Есть две проблемы с тем, что вы делаете:

1) У вашего прямоугольника нет ширины. Я добавил это:

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

2) Ваши данные не являются массивом. D3 ожидает, что массивы данных будут предоставлены с .data() помощью метода, и у вас есть data = {Value : 22.5} (фактически). Я изменил его на это:

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

Обновленная скрипка здесь.