Javascript d3两级嵌套数据绑定_Javascript_D3.js_Nested

Javascript d3两级嵌套数据绑定

javascript d3.js

Javascript d3两级嵌套数据绑定,javascript,d3.js,nested,Javascript,D3.js,Nested,我想做一个分组条形图条形图显示的主要值是“值”，这是我随机创建的数字。价值表示按类别划分-性别/年龄/教育，每个类别分为子类别以下是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 我使用nes

我想做一个分组条形图

条形图显示的主要值是“值”，这是我随机创建的数字。价值表示按类别划分-性别/年龄/教育，每个类别分为子类别

以下是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是列的名称，但它不起作用。我认为我缺少的是如何访问两级嵌套数据中的值？我以这种方式进行了研究，但无法找出我的代码不正确的原因

确切的错误消息如下：解析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>


var margin={顶部：60，右侧：100，底部：20，左侧：80}，
宽度=850-边距。左侧-边距。右侧，
高度=370-margin.top-margin.bottom；
var x0=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充器（0.1）；
var x1=d3.scaleBand（）
.填充（0.05）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var z=d3.scaleOrdinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
var svg=d3。选择（“图形”）
.append（“svg”）
.样式（“宽度”，宽度+边距。左侧+边距。右侧+“px”）
.样式（“高度”，高度+边距.顶部+边距.底部+“px”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.attr（“类”、“svg”）；
d3.csv（“practice.csv”，函数（错误、数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
d、 cate=d.cate；
d、 cate_val=d.cate_val；
d、 值=+d.值；
})
var nest=d3.nest（）
.key（函数（d）{return d.cate；}）
.key（函数（d）{return d.cate_val；}）
.条目（数据）；
域（nest.map（函数（d）{return d.key；}））；
x1.domain（data.map（函数（d）{return d.cate_val；}））
.rangeRound（[0，x0.bandwidth（）]）；
y、 域（[0，d3.max（嵌套，函数（d）{返回d.value；}）]；
var category=svg.selectAll（“g”）
.数据（嵌套）
.输入（）
.附加（“g”）
类别。选择全部（“rect”）
.data（函数（d）{返回d.values；}）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{返回x1（d.key）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“宽度”，x1.bandwidth（））
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）
.attr（“fill”，函数（d）{返回z（d.key）；}）；
})

在战略位置添加一些

console.log（“marker”，myvar）语句，您可以看到d
，nest
变量的结构，然后您将了解它。提示：在回调函数内部。你能给我一点更具体的提示，说明原因吗？当我检查'nest'变量时，似乎数据结构良好？我想知道为什么它至少适用于x位置，通过d键访问，但不适用于y。我想到binging对d.key有效，但在访问两级嵌套数据中的值时出现了问题。这有意义吗？嗨，rioV8，我试过很多不同的方法，但都做不好。你能把你的意思告诉我更多的细节吗？谢谢，我解决了这个问题。