Question

＆＃13;

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));

＆＃13;

<style> /* set the CSS */

.bar { fill: steelblue; }

</style>

＆＃13;

<!DOCTYPE html>

<body><script src="//d3js.org/d3.v4.min.js"></script></body>

＆＃13;

我想要一张图表来描绘男性和女性的数量。在x轴上计算y轴和性别我的d3.js index.html

其中data_json是此数据 [ {"Gender":"Male","count":5}, {"Gender":"Female","count":2}];

如果我将data_json设置为仅相同的其他轴，则显示只有1组的图形，即{"Gender":"Male","count":5}。

但不在同一图表中。我是d3.js的新手，无法找到解决方案。请帮忙。

Answer 1

您的错误源于此：

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和height值以访问d.count或d.Gender而不是data.Gender或data.count（因为data.count未定义，并且也不是基准特定的，而d.count是与每个矩形绑定的基准相关的计数。

查看下面的代码段进行这些更改：

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>

无法弄清楚d3.js错误

1 个答案: