代码之家 › 专栏 › 技术社区 › Hannan

D3-使用JSON数据创建多个条

d3.js

Hannan · 技术社区 · 7 年前

我不知道如何从数据中添加其他行。 当我执行console.log(dataset.length)时,它向我显示0,这意味着数据集中只有一项是预期的。

<script>
    var dataset = [{"Pax_Rev": 1000, "Crg_Rev": 500, 
                    "Fixed_Costs": 800, "Variable_Costs": 200}];

    var width = 500;
    var height = 1000;
    var barPadding = 1;

    var svg = d3.select("body")
                .append("svg")
                .append("g")
                .attr("width", width)
                .attr("height", height)
                .attr("class", "svg")

               svg3.selectAll("rect")
                    .data(dataset)
                    .enter()
                    .append("rect")
                    .attr("x", 0)
                    .attr("y", function(d){
                    return height - d.Pax_Rev // How to add other items like Crg_Rev etc?
                    })
                    .attr("width", 20)
                    .attr("height", function(d){
                    return d.Pax_Rev
                    });
</script>

1 回复 | 直到 7 年前

Gerardo Furtado 7 年前

正如我在你的 previous question ,这是预期的行为。由于数据数组中只有一个对象,D3“enter”选择将只创建一个元素。

如果你看看 API ,你会看到的 selection.data()

大堆对于具有选定元素的数据[…],指定的数据是一个任意值(例如,数字或对象)。(我的重点)

因此,我们必须将那个巨大的物体转换成几个物体。这是几种可能的方法之一:

var dataset = [{
  "Pax_Rev": 1000,
  "Crg_Rev": 500,
  "Fixed_Costs": 800,
  "Variable_Costs": 200
}];

var data = [];

for (var key in dataset[0]) {
  data.push({
    category: key,
    value: dataset[0][key]
  })
}

console.log(data)

现在,我们有一个 data 数组,有几个对象,每个条形图一个,我们可以创建条形图。

var dataset = [{
  "Pax_Rev": 1000,
  "Crg_Rev": 500,
  "Fixed_Costs": 800,
  "Variable_Costs": 200
}];

var data = [];

for (var key in dataset[0]) {
  data.push({
    category: key,
    value: dataset[0][key]
  })
}

var svg = d3.select("svg");
var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return d.value
  })])
  .range([120, 10]);
var xScale = d3.scaleBand()
  .domain(data.map(function(d) {
    return d.category
  }))
  .range([40, 280])
  .padding(0.2);

var rects = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("fill", "steelblue")
  .attr("x", function(d) {
    return xScale(d.category)
  })
  .attr("width", xScale.bandwidth())
  .attr("y", function(d) {
    return yScale(d.value)
  })
  .attr("height", function(d) {
    return 120 - yScale(d.value)
  });

var yAxis = d3.axisLeft(yScale);
var xAxis = d3.axisBottom(xScale);

svg.append("g").attr("transform", "translate(40,0)").call(yAxis);
svg.append("g").attr("transform", "translate(0,120)").call(xAxis);

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