Question

我正在尝试制作分组的条形图。

要显示的主要值是'value'，这是我随机创建的数字。价值表示方式按类别划分-性别/年龄/教育程度，每个类别又分为子类别。

这是csv中整个数据的样子：

cate,cate_val,value
gender,male,100
gender,female,200
age,10~20,35
age,20~30,45
age,30~40,75
age,40~50,90
age,50~60,55
edu,primary,85
edu,middle,120
edu,high,95

我使用nest（）使数据深两级，并将数据绑定到rect，如下所示。

我可以看到d.key（cate_val）绑定得很好。但是问题出在y上。我尝试使用d.values而不是d.value，因为value是列的名称，但是它也不起作用。我以为我缺少的是如何访问两层嵌套数据中的值？我以这种方式进行了研究，但无法弄清楚为什么我的代码不正确。

确切的错误消息是这样的：意外值NaN解析y属性。

谁能给出任何想法，这里缺少什么，为什么值（d.value）没有绑定？

谢谢

<!doctype html>
<html>
<meta charset = "utf-8">

<head>
</head>

<body>
<div id = "graph">

<script src='https://d3js.org/d3.v4.min.js'></script> 
<script>

var margin = {top: 60, right: 100, bottom: 20, left: 80},
    width = 850 - margin.left - margin.right, 
    height = 370 - margin.top - margin.bottom; 

var x0 = d3.scaleBand()
            .rangeRound([0, width])
            .paddingInner(0.1);

var x1 = d3.scaleBand()
            .padding(0.05);

var y = d3.scaleLinear()
            .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var svg = d3.select("#graph")
            .append("svg")
            .style("width", width + margin.left + margin.right + "px")
            .style("height", height + margin.top + margin.bottom + "px")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform","translate(" + margin.left + "," + margin.top + ")")
            .attr("class", "svg");

d3.csv("practice.csv", function(error, data) {

    if (error) throw error;

    data.forEach(function(d) {
        d.cate = d.cate;
        d.cate_val = d.cate_val;
        d.value = +d.value;
    })

    var nest = d3.nest()
                .key(function(d) { return d.cate; })
                .key(function(d) { return d.cate_val; })
                .entries(data); 

    x0.domain(nest.map(function(d) { return d.key; }));
    x1.domain(data.map(function(d) { return d.cate_val; }))
        .rangeRound([0, x0.bandwidth()]);  
    y.domain([0, d3.max(nest, function(d) { return d.value; })]); 

    var category = svg.selectAll("g")
                    .data(nest)
                    .enter()
                    .append("g")

    category.selectAll("rect")
            .data(function(d) { return d.values; })
            .enter()
            .append("rect")
            .attr("x", function(d) { return x1(d.key); })
            .attr("y", function(d) { return y(d.value); })
            .attr("width", x1.bandwidth())
            .attr("height", function(d) { return height - y(d.value); }) 
            .attr("fill", function(d) { return z(d.key); });

})

</script>

</body>
</html>

d3两级嵌套数据绑定

0 个答案: