即使阅读了诸如this之类的一些教程，我在d3中制作小的倍数还是有一些问题。我打算制作一组2x2的条形图，但是我的代码出了点问题，没有任何显示。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 250;
var margin = {
top: 45,
right: 100,
bottom: 20,
left: 20
};
var dataset = [{
"type": "A",
"idx": 1,
"value": 2
},
{
"type": "B",
"idx": 1,
"value": 2
},
{
"type": "C",
"idx": 1,
"value": 3
},
{
"type": "D",
"idx": 1,
"value": 3
},
{
"type": "A",
"idx": 2,
"value": 3
},
{
"type": "B",
"idx": 2,
"value": 2
},
{
"type": "C",
"idx": 2,
"value": 5
},
{
"type": "D",
"idx": 2,
"value": 1
}
];
var data = d3.nest()
.key(function(d) {
return d.type;
})
.entries(dataset);
var xScale = d3.scaleBand()
.domain(d3.range(data.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([0, h]);
//Create SVG element
var svg = d3.select("#vis").selectAll("svg")
.data(data)
.enter()
.append("svg:svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.selectAll(".bar")
.data(function(d) {
return d.values;
})
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return xScale(d.idx);
})
.attr("width", 10)
.attr("y", function(d) {
return yScale(d.value);
})
.attr("height", function(d) {
return yScale(d.value);
})
</script>
</body>我打算为每个小组制作一个条形图，并将其布置在2x2的网格上。但是在嵌套并附加多个svg之后，没有任何显示。
感谢您指出这里出了什么问题。
最佳答案
这里是问题：
您没有ID为vis的容器。创造它：
<div id="vis"></div>
条的高度不正确。它应该是：
.attr("height", function(d) {
return h - yScale(d.value);
})
但是，主要问题是
y标度的范围。由于您具有嵌套数组，因此应该为：.domain([0, d3.max(data, d => d3.max(d.values, e => e.value))])
请记住，您的代码将为所有小的倍数创建相同的比例。有时设计师希望每个小倍数都有不同的比例...
这是经过这些更改的代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
//Width and height
var w = 300;
var h = 150;
var margin = {
top: 5,
right: 10,
bottom: 5,
left: 10
};
var dataset = [{
"type": "A",
"idx": 1,
"value": 2
},
{
"type": "B",
"idx": 1,
"value": 2
},
{
"type": "C",
"idx": 1,
"value": 3
},
{
"type": "D",
"idx": 1,
"value": 3
},
{
"type": "A",
"idx": 2,
"value": 3
},
{
"type": "B",
"idx": 2,
"value": 2
},
{
"type": "C",
"idx": 2,
"value": 5
},
{
"type": "D",
"idx": 2,
"value": 1
}
];
var data = d3.nest()
.key(function(d) {
return d.type;
})
.entries(dataset);
var xScale = d3.scaleBand()
.domain(d3.range(data.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d3.max(d.values, e => e.value))])
.range([0, h]);
//Create SVG element
var svg = d3.select("#vis").selectAll("svg")
.data(data)
.enter()
.append("svg:svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.selectAll(".bar")
.data(function(d) {
return d.values;
})
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return xScale(d.idx);
})
.attr("width", 10)
.attr("y", function(d) {
return yScale(d.value);
})
.attr("height", function(d) {
return h - yScale(d.value);
})
</script>
</body>关于javascript - 如何在d3.js中生成较小的倍数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49828937/