Есть ли способ, чтобы повторяющиеся ключи не конфликтовали, но могу ли я иметь больше списка пар ключ-значение, где все они отображаются на моей гистограмме? Как вы делаете это, используя графики 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},
];
Есть две парковки с ключом "А". Я хочу, чтобы они оба отличались друг от друга, чтобы оба отображались на графике на 1-й и 3-й позициях соответственно. Интересно, сводится ли это к типу графика, который я использую, или это можно сделать с помощью некоторых настроек кода.
