D3 V5 Гистограмма - PullRequest
Новая
       12

D3 V5 Гистограмма

0 голосов
/ 15 января 2019

Хорошо, я пытаюсь сделать гистограмму. Это мой Javascript. 

var data = [
{
    "date": "1459468800000",                            // 1 April 2016 
    "values": [{
        "name": "US",
        "value": 72580613,
        "domainname": "com"
    }, {
        "name": "US",
        "value": 161645,
        "domainname": "nl"
    }]
}, {
    "date": "1467331200000",                            // 1 Juli 2016
    "values": [{
        "name": "US",
        "value": 73129243,
        "domainname": "com"
    }, {
        "name": "US",
        "value": 166152,
        "domainname": "nl"
    }]
}
]

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var tooltip = d3.select("body").append("div").attr("class");

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var colours = d3.scaleOrdinal()
    .range(["#6F257F", "#CA0D59"]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(data.map(function(d) { return d.values.domainname; }));
    y.domain([0, d3.max(data, function(d) { return d.values.value; })]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).ticks(25).tickFormat(function(d) { return parseInt(d / 1000) + "K"; }).tickSizeInner([-width]))
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .attr("fill", "#5D6971")
        .text("Aantal domeinen");

    g.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("x", function(d) { return x(d.values.domainname); })
        .attr("y", function(d) { return y(d.values.value); })
        .attr("width", x.bandwidth())
        .attr("height", function(d) { return height - y(d.values.value); })
        .attr("fill", function(d) { return colours(d.values.domainname); })

Как видите, у меня есть данные в массиве. В данных у меня есть 2 разные даты.

На данный момент я хочу показывать только первую дату на гистограмме, но оба домена (кроме столбцов (в будущем я буду добавлять больше доменов к датам). ( Если вы заинтересованы: Идея состоит в том, чтобы сделать раскрывающийся список на странице, чтобы пользователь мог выбрать другую дату, и столбцы будут обновляться).

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

error

Итак, D3 ожидает число, но не получает его по оси Y и по высоте, как я понимаю, ошибка ...

Как я могу исправить отображение первой даты с правильными доменами?

1 Ответ

0 голосов
/ 15 января 2019

Доступ к значениям был неправильным, вместо d.values.domainname или d.values.value вы должны использовать d.values[i].domainname и d.values[i].value.

Здесь вы можете увидеть запущенный пример. 

var data = [
{
    "date": "1459468800000",                            // 1 April 2016 
    "values": [{
        "name": "US",
        "value": 72580613,
        "domainname": "com"
    }, {
        "name": "US",
        "value": 161645,
        "domainname": "nl"
    }]
}, {
    "date": "1467331200000",                            // 1 Juli 2016
    "values": [{
        "name": "US",
        "value": 73129243,
        "domainname": "com"
    }, {
        "name": "US",
        "value": 166152,
        "domainname": "nl"
    }]
}
]

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var tooltip = d3.select("body").append("div").attr("class");

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var colours = d3.scaleOrdinal()
    .range(["#6F257F", "#CA0D59"]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(data.map(function(d, i) { return d.values[i].domainname; }));
    y.domain([0, d3.max(data, function(d, i) { return d.values[i].value; })]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).ticks(25).tickFormat(function(d) { return parseInt(d / 1000) + "K"; }).tickSizeInner([-width]))
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .attr("fill", "#5D6971")
        .text("Aantal domeinen");

    g.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("x", function(d, i) { return x(d.values[i].domainname); })
        .attr("y", function(d, i) { return y(d.values[i].value); })
        .attr("width", x.bandwidth())
        .attr("height", function(d, i) {return height - y(d.values[i].value)})
        .attr("fill", function(d, i) { return colours(d.values[i].domainname); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg width="400" height="400"></svg>

Как примечание, столбец nl выглядит особенно маленьким, потому что значения слишком разные.

...