나는 약간의 피클입니다. 한 번에 10 행의 데이터를로드하는 d3.js를 사용하여 막대 그래프를 만들었습니다. "다음"을 클릭 할 때마다 다음 10 개 행이로드됩니다. 그러나 내가 작업하는 데이터 세트는 항상 10으로 나눌 수있는 행 수를 가지지 않으므로 누락 된 값을 보완하려고하는 나머지 2 개 또는 3 개의 막대가 홀수 너비로 끝납니다. 위치를 이동하지 않고 매번 동일한 너비로 막대를로드하고 싶지만, 10 개 이상로드하도록 변경하려는 경우를 대비하여 x 축이 거기에 넣은 데이터의 양에 비례하도록하고 싶습니다. .
여기 내 현재 코드가 있습니다.
var x = d3.scale.ordinal()
.rangeRoundBands([5, 525], .6)
.domain(charges);
var y = d3.scale.linear()
.range([150, 0])
.domain([0, d3.max(swappedData) + ((d3.max(swappedData) / 10) + 10)]);
var rect = g.selectAll('.bar').data(data.slice(a,b));
rect.enter().append('rect');
rect.exit().remove('rect');
rect.attr('class', 'bar')
.transition().duration(250)
.attr('width', x.rangeBand())
.attr('height', function(d) { return 150 - y(d.QuantityCharged) + 2})
.attr('x', function(d) { return x(d.unslicedCharge) })
.attr('y', function(d) { return y(d.QuantityCharged) });
이를 처리하기위한 몇 가지 다른 접근 방식이 있습니다 (따라서이 질문은 너무 광범위 할 수 있습니다 ).
이 접근 방식에서는 현재 데이터 배열을 자리 표시 자로 구성된 배열과 병합합니다.
var merged = d3.merge([data,
d3.range(10 - data.length).map(function(d, i) {
return {
name: "bar" + i,
value: 0
};
})
]);
여기에서 자리 표시자는 값이 0으로 name시작 하는 속성을 가지고 bar있습니다 (데이터 구조를 공유하지 않았기 때문에 더미를 만들어야했습니다).
병합 함수는 자리 표시 자 개체를 사용하여 길이가 10이 될 때까지 데이터 배열을 완료합니다. 데이터에 이미 10 개의 개체가있는 경우 자리 표시자가 생성되지 않습니다. 데이터에 4 개의 개체가있는 경우 6 개의 자리 표시자가 생성됩니다.
그런 다음 축 생성기에서 자리 표시자를 제거하면됩니다.
다음은 데모입니다. 4 개의 데이터 세트가 있으며 모두 동일한 함수를 사용하여 그려집니다.
var data = [
[{name: "foo", value:10},{name: "foo2", value:40},{name: "foo3", value:30},{name: "foo4", value:10}],
[{name: "foo", value:10},{name: "foo2", value:40},{name: "foo3", value:40},{name: "foo4", value:90},{name: "foo5", value:10},{name: "foo6", value:70}],
[{name: "foo", value:50}],
[{name: "foo", value:10},{name: "foo2", value:40},{name: "foo3", value:40},{name: "foo4", value:90},{name: "foo5", value:10},{name: "foo6", value:70},{name: "foo7", value:10},{name: "foo8", value:40},{name: "foo9", value:30},{name: "foo10", value:10}]
];
data.forEach(function(d) {
draw(d);
});
function draw(data) {
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 100);
var merged = d3.merge([data, d3.range(10 - data.length).map(function(d, i) {
return {
name: "bar" + i,
value: 0
};
})]);
var xScale = d3.scale.ordinal()
.rangeRoundBands([20, 480], .6)
.domain(merged.map(function(d) {
return d.name
}));
var yScale = d3.scale.linear()
.domain([0, 100])
.range([80, 10]);
var rects = svg.selectAll("foo")
.data(merged)
.enter()
.append("rect")
.attr("x", function(d) {
return xScale(d.name)
})
.attr("y", function(d) {
return yScale(d.value)
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return 80 - yScale(d.value)
})
.attr("fill", "teal");
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(xScale)
.tickValues(xScale.domain().filter(function(d) {
return d.substring(0, 3) != "bar"
}));
var gX = svg.append("g")
.attr("transform", "translate(0,80)")
.call(xAxis);
}line,
path {
fill: none;
stroke: black;
}<script src="https://d3js.org/d3.v3.min.js"></script>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다