Хотите дублировать ключи в гистограмме D3 - PullRequest
Новая
       46

Хотите дублировать ключи в гистограмме D3

1 голос
/ 10 октября 2019

Есть ли способ, чтобы дублированные ключи не конфликтовали, но можно ли иметь больше списка пар ключ-значение, где все отображаются на моей гистограмме? Как вы делаете это, используя графики D3? Я использую версию 4. 

var data = [{
    parkingLot: "A",
    numOfCars: 5
  },
  {
    parkingLot: "B",
    numOfCars: 6
  },
  {
    parkingLot: "A",
    numOfCars: 2
  },
  {
    parkingLot: "C",
    numOfCars: 3
  },
];

var series = d3.stack()
  .keys(["numOfCars"])
  .offset(d3.stackOffsetDiverging)
  (data);

var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 30,
    bottom: 120,
    left: 60
  }, //Bottom originally 30
  width = +svg.attr("width"),
  height = +svg.attr("height");

var x = d3.scaleBand()
  .domain(data.map(function(d) {
    return d.parkingLot;
  }))
  .rangeRound([margin.left, width - margin.right])
  .padding(0.1);

var y = d3.scaleLinear()
  .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
  .rangeRound([height - margin.bottom, margin.top]);

var z = d3.scaleOrdinal(d3.schemeCategory10);

svg.append("g")
  .selectAll("g")
  .data(series)
  .enter().append("g")
  .attr("fill", function(d) {
    return z(d.key);
  })
  .selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter().append("rect")
  .attr("width", x.bandwidth)
  .attr("x", function(d) {
    return x(d.data.parkingLot);
  })
  .attr("y", function(d) {
    return y(d[1]);
  })
  .attr("height", function(d) {
    return y(d[0]) - y(d[1]);
  })

//With rotated x-axis labels implemented (modified from simpler original code)
svg.append("g")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-1em") //Left right shift before rotation
  .attr("dy", "-0.5em") //Up down shift before rotation
  .attr("transform", "rotate(-90)");

svg.append("g")
  .attr("transform", "translate(" + margin.left + ",0)")
  .call(d3.axisLeft(y));

function stackMin(serie) {
  return d3.min(serie, function(d) {
    return d[0];
  });
}

function stackMax(serie) {
  return d3.max(serie, function(d) {
    return d[1];
  });
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <svg id="bar-graph" width="960" height="540"></svg>
</body>

</html>

Набор данных: 

      var data = [
        {parkingLot: "A", numOfCars: 5},
        {parkingLot: "B", numOfCars: 6},
        {parkingLot: "A", numOfCars: 2},
        {parkingLot: "C", numOfCars: 3},
      ];

Есть два парковочных места с ключом «A». Я хочу, чтобы они оба отличались друг от друга, поэтому оба они отображаются на графике в 1-й и 3-й позициях соответственно. Интересно, сводится ли это к типу графиков, которые я использую, или это можно сделать с помощью некоторых настроек кода.

...