D3 V5 条形图

Question

好的，我正在尝试制作条形图。这是我拥有的 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 个不同的日期。

现在我只想在条形图中显示第一个日期，但两个域（com 和 nl 都显示为条形（将来我会在日期中添加更多域）。（如果您有兴趣： 这个想法是在页面上做一个下拉菜单，这样用户就可以选择另一个日期，并且栏会更新）。

我现在可以看到屏幕上的轴，所以效果很好。但是我收到了这个错误：

所以 D3 期待一个数字，但它在 Y 轴和高度上没有得到一个，因为我理解错误...

如何解决它显示的第一个日期与域正确？

Answer 1

对值的访问不正确，而不是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 列看起来特别小，因为值相差太大。