Question

我有一个正在运行并显示正确数据的条形图。我现在正尝试将其转换为堆积条形图，显示不同类别的单独颜色。我尝试过使用在线的例子并花了很长时间用谷歌搜索，但我总是得到我似乎无法摆脱的错误。

我似乎面临的最大问题是d3.json(urljson,...)。看来我正在监督一些技巧来让它读取数据。通常会收到错误cannot read property *something* of undefined。我真的只需要帮助就可以将它叠加起来，然后我可以把剩下的东西弄清楚（用正确的颜色和所有这些来获得它）。

如果您有关于从何处开始转换的任何提示，因为我已经尝试并开始超过6次，这也将非常有用。

我确实意识到，为了从常规条形图转换为堆叠条形图，需要进行一些更改。

我也在Stack上查看了其他示例，但这些方法都不适用于我。

我正在使用的代码如下所示：

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

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

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

d3.json(urljson, function(error, data) {
    data = data.results;
    data.forEach(function(d) {
        d.sum_value = +d.sum_value ;
    });

    x.domain(data.map(function(d) {return d.date}));
    y.domain([0, d3.max(data, function(d) {return d.sum_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))
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Values");

    g.selectAll(".bar")
        .data(data)
        .enter()
        .append("rect")
            .attr("class", "bar")
            .attr("x", function(d) {return x(d.date); })
            .attr("y", function(d) {return y(d.sum_value ); })
            .attr("width", x.bandwidth())
            .attr("height", function(d) {return height - y(d.sum_value );})
            .text(function(d) {return y(d.sum_value ); })
});

JSON是通过Oracle DB的Django-rest-framework提供的，它看起来像这样：

HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 32,
    "next": null,
    "previous": null,
    "results": [
        {
            "date": "2017-09-22",
            "type": "A",
            "sum_value": 102
        },
        {
            "date": "2017-09-22",
            "type": "Random",
            "sum_value": 32
        },
        {
            "date": "2017-09-22",
            "type": "B",
            "sum_value": 1
        },
        {
            "wo_dt": "2017-09-22",
            "work_type": "A",
            "sum_mh": 85
        },
        {
            "date": "2017-09-25",
            "type": "C",
            "sum_value": 2
        },
        {
            "date": "2017-09-26",
            "type": "B",
            "sum_value": 487
        },
        {
            "date": "2017-09-26",
            "type": "Random",
            "sum_value": 87
        },
        {
            "date": "2017-09-26",
            "type": "A",
            "sum_value": 110
        }
    ]
}

date是我要分组的字段，sum_value是每种颜色的高度，type是分隔颜色的部分。如果它说Random，它应该显示不同于A，B和C的颜色，并为每个随机显示不同的颜色。

D3 v4正常条形图使用json

0 个答案: