Проблема с параметром systemctl --root = в RHEL / CentOS 7

Проблема с вашим кодом заключается в том, что вы пытаетесь использовать значения из вашего массива data для создания диапазонов диапазонов в порядковой шкале. Поскольку одно и то же входное значение всегда будет сопоставлено с тем же выходным значением, что означает, что оба входа 16 отображаются в один диапазон диапазона 72.

Если вы хотите, чтобы каждое входное значение отображалось на его собственный «бар», тогда вам нужно использовать индексы массива вместо значений массива.

Сначала вы готовите индексы

var indices = d3.range(0, data.length);    // [0, 1, 2, ..., data.length-1]

Затем вы используете их для определения шкалы y domain

var y = d3.scale.ordinal()
    .domain(indices)
    // use rangeRoundBands instead of rangeBands when your output units
    // are pixels (or integers) if you want to avoid empty line artifacts
    .rangeRoundBands([0, chartHeight]);  

Наконец, вместо использования значений массива в качестве входных данных используются индексы массивов при сопоставлении с y

chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("y", function (value, index) { 
        // use the index as input instead of value; y(index) instead of y(value)
        return y(index); 
    })
    .attr("width", x)
    .attr("height", y.rangeBand());

. В качестве дополнительного бонуса этот код автоматически изменит масштаб диаграммы если количество данных изменяется или вы решите изменить ширину или высоту диаграммы.

Вот демон jsFiddle: http://jsfiddle.net/q8SBN/1/

Полный код:

var data = [4, 8, 15, 16, 23, 16];
var indices = d3.range(0, data.length);

var chartWidth = 420;
var chartHeight = 120;

var chart = d3.select("body").append("svg")
     .attr("class", "chart")
     .attr("width", chartWidth)
     .attr("height", chartHeight);

var x = d3.scale.linear()
     .domain([0, d3.max(data)])
     .range([0, chartWidth])

var y = d3.scale.ordinal()
     .domain(indices)
     .rangeRoundBands([0, chartHeight]);

chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("y", function (value, index) { return y(index); })
    .attr("width", x)
    .attr("height", y.rangeBand());

0
задан user3142747 17 January 2019 в 13:04
поделиться