var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var temp = [ {"Gender":"Male","count":5}, {"Gender":"Female","count":2}];
var data=[]
data.push(temp);
x.domain(data.map(function(d) { return d.Gender; }));
y.domain([0, d3.max(data, function(d) { return d.count; })]);
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(data) { return x(data.Gender); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(data.count); })
.attr("height", function(d) { return height - y(data.count); });
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));<style> /* set the CSS */
.bar { fill: steelblue; }
</style><!DOCTYPE html>
<body><script src="//d3js.org/d3.v4.min.js"></script></body>我想要一个图表来绘制男性和女性计数。 y 轴为计数，x 轴为性别 我的 d3.js index.html
其中 data_json 是该数据
[ {"性别":"男","计数":5}, {"性别":"女","计数":2}];
我只得到一组图表，即{"Gender":"Male","count":5}如果我将data_json设置为相同，否则仅显示轴。
但不在同一个图表中。我是 d3.js 新手，无法找出解决方案。请帮忙。
最佳答案
您的错误源于此:
var temp = [ {"Gender":"Male","count":5}, {"Gender":"Female","count":2}];
var data=[]
data.push(temp);
d3 .data 方法采用一个数组。与输入选择相结合，可以为数组中的每一项添加一个元素。 temp 已经是一个数组，通过将其推送到 data 您将创建一个如下所示的数组:
[[ {"Gender":"Male","count":5}, {"Gender":"Female","count":2}]]
该数组只有一项，即子数组。子数组确实是您想要的。这在使用秤时也会产生问题:
x.domain(data.map(function(d) { return d.Gender; }));
由于每个数据(只有一个)都包含一个数组，d.Gender 将是未定义的，d[1] 将被定义。
相反，使用临时数组作为数据集，而不将其插入新数组。然后修改每个矩形的 y、x 和高度值以访问 d.count 或 d.Gender 而不是 data.Gender 或 data.count (因为 data.count 未定义，也不是特定于数据的，而 d.count 是与绑定(bind)到的数据关联的计数每个矩形)。
看一下下面的代码片段，其中进行了这些更改:
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 500 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var data = [ {"Gender":"Male","count":5}, {"Gender":"Female","count":2}];
x.domain(data.map(function(d) { return d.Gender; }));
y.domain([0, d3.max(data, function(d) { return d.count; })]);
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(data) { return x(data.Gender); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d.count); })
.attr("height", function(d) { return height - y(d.count); });
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));<style> /* set the CSS */
.bar { fill: steelblue; }
</style><!DOCTYPE html>
<body><script src="//d3js.org/d3.v4.min.js"></script></body>关于javascript - 无法找出 d3.js 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45181369/