-1
분명히 여기에 뭔가 빠져있어 전문가 입력이 필요합니다. 나는 버튼을 클릭 할 때 데이터 셋이 업데이트되는 d3을 사용하여 x 축 타임 라인이있는 간단한 막대 차트를 만들려고 노력했습니다. 각 데이터 세트는 사용자 입력 (궁극적으로 가장 중요한 것은 선택한 시간 범위)에 따라 길이가 다릅니다. 내 특정 문제를 해결하기 위해, 나는 jsFiddle 내도, 아래 제공된 복제 된 코드에 포함 된 변수 '라이브'와 '시험'에 저장된 두 데이터 세트를 추출한 : http://jsfiddle.net/jimaroonie/6WBEU/d3을 사용하여 x 축 타임 라인이있는 차트에서 다양한 길이의 막 대형 차트 데이터 업데이트
내 문제는 '내가 할 수있는 것입니다 막대가 새 데이터 집합의 값으로 업데이트되도록합니다. 업데이트 버튼을 클릭 할 때 명확하게 작동하는 각 막대의 너비가 데이터 세트의 길이에 따라 달라 지므로 데이터가 변경됩니다 (x 축은 시간 눈금 형식을 사용하지만 아래의 'xord'및 'x'변수)).
그래서 내가 어디로 잘못 가고 있습니까? 선택 계층 구조에 뭔가 빠져 있거나 데이터가 추가되는 방식 (전혀 없다면)이라고 생각합니다. 누군가가 올바른 방향으로 나를 가리킬 수 있기를 바랍니다. 스타일과 선택에 사용
<body>
<div id="click">
<button>Update</button>
</div>
</body>
.CSS :
body {
font: 12px Arial;
}
h1, h2 {
font-weight: bold;
}
path {
stroke-width: 2;
fill: none;
}
.servers-class {
stroke: steelblue;
shape-rendering: crispEdges;
}
.players-class {
stroke: red;
}
.bar-class {
fill: lightblue;
}
.axis path, .axis line {
fill: none;
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
}
그리고 마지막으로, 자바 스크립트 : 재미
var live = [{"Servers":"10301","Players":"7743","Retrieved":"2013-08-01 03:00:05"},{"Servers":"10301","Players":"8987","Retrieved":"2013-08-01 02:00:05"},{"Servers":"10299","Players":"9973","Retrieved":"2013-08-01 01:00:06"},{"Servers":"10294","Players":"11066","Retrieved":"2013-08-01 00:00:04"},{"Servers":"10291","Players":"12194","Retrieved":"2013-07-31 23:00:05"},{"Servers":"10285","Players":"14094","Retrieved":"2013-07-31 22:00:05"},{"Servers":"10281","Players":"16666","Retrieved":"2013-07-31 21:00:05"},{"Servers":"10274","Players":"19626","Retrieved":"2013-07-31 20:00:11"},{"Servers":"10264","Players":"20595","Retrieved":"2013-07-31 19:00:05"},{"Servers":"10257","Players":"20289","Retrieved":"2013-07-31 18:00:07"},{"Servers":"10246","Players":"19772","Retrieved":"2013-07-31 17:00:04"},{"Servers":"10235","Players":"19025","Retrieved":"2013-07-31 16:00:04"},{"Servers":"10225","Players":"19226","Retrieved":"2013-07-31 15:00:05"},{"Servers":"10217","Players":"18856","Retrieved":"2013-07-31 14:00:04"},{"Servers":"10211","Players":"17571","Retrieved":"2013-07-31 13:00:06"},{"Servers":"10203","Players":"16722","Retrieved":"2013-07-31 12:00:04"},{"Servers":"10195","Players":"16918","Retrieved":"2013-07-31 11:00:04"},{"Servers":"10186","Players":"16160","Retrieved":"2013-07-31 10:00:05"},{"Servers":"10179","Players":"15283","Retrieved":"2013-07-31 09:00:04"},{"Servers":"10218","Players":"13658","Retrieved":"2013-07-31 08:00:07"},{"Servers":"10215","Players":"10549","Retrieved":"2013-07-31 07:00:04"},{"Servers":"10213","Players":"7698","Retrieved":"2013-07-31 06:00:05"},{"Servers":"10210","Players":"6548","Retrieved":"2013-07-31 05:00:05"},{"Servers":"10340","Players":"6603","Retrieved":"2013-07-31 04:00:05"}];
var test = [{"Servers":"10215","Players":"15378","Retrieved":"2013-07-30 09:00:05"},{"Servers":"10207","Players":"12884","Retrieved":"2013-07-30 08:00:04"},{"Servers":"10205","Players":"10113","Retrieved":"2013-07-30 07:00:04"},{"Servers":"10200","Players":"7381","Retrieved":"2013-07-30 06:00:07"},{"Servers":"10195","Players":"6268","Retrieved":"2013-07-30 05:00:04"},{"Servers":"10302","Players":"6477","Retrieved":"2013-07-30 04:00:04"},{"Servers":"10293","Players":"7925","Retrieved":"2013-07-30 03:00:05"},{"Servers":"10288","Players":"9181","Retrieved":"2013-07-30 02:00:05"},{"Servers":"10286","Players":"10238","Retrieved":"2013-07-30 01:00:04"},{"Servers":"10291","Players":"10865","Retrieved":"2013-07-30 00:00:04"},{"Servers":"10290","Players":"11770","Retrieved":"2013-07-29 23:00:05"},{"Servers":"10283","Players":"13600","Retrieved":"2013-07-29 22:00:05"},{"Servers":"10280","Players":"16196","Retrieved":"2013-07-29 21:00:04"},{"Servers":"10274","Players":"18868","Retrieved":"2013-07-29 20:00:05"},{"Servers":"10264","Players":"19884","Retrieved":"2013-07-29 19:00:05"},{"Servers":"10250","Players":"19667","Retrieved":"2013-07-29 18:00:05"},{"Servers":"10240","Players":"18211","Retrieved":"2013-07-29 17:00:05"},{"Servers":"10230","Players":"17748","Retrieved":"2013-07-29 16:00:04"},{"Servers":"10220","Players":"17977","Retrieved":"2013-07-29 15:00:05"},{"Servers":"10211","Players":"17914","Retrieved":"2013-07-29 14:00:06"},{"Servers":"10206","Players":"16742","Retrieved":"2013-07-29 13:00:06"},{"Servers":"10189","Players":"16475","Retrieved":"2013-07-29 12:00:05"},{"Servers":"10175","Players":"16201","Retrieved":"2013-07-29 11:00:05"},{"Servers":"10163","Players":"15738","Retrieved":"2013-07-29 10:00:05"},{"Servers":"10157","Players":"14728","Retrieved":"2013-07-29 09:00:05"},{"Servers":"10201","Players":"12660","Retrieved":"2013-07-29 08:00:06"},{"Servers":"10192","Players":"10393","Retrieved":"2013-07-29 07:00:05"},{"Servers":"5000","Players":"7846","Retrieved":"2013-07-29 06:00:05"},{"Servers":"10184","Players":"6342","Retrieved":"2013-07-29 05:00:05"},{"Servers":"10294","Players":"6716","Retrieved":"2013-07-29 04:00:07"},{"Servers":"10291","Players":"7863","Retrieved":"2013-07-29 03:00:05"},{"Servers":"10289","Players":"8796","Retrieved":"2013-07-29 02:00:06"},{"Servers":"10286","Players":"9748","Retrieved":"2013-07-29 01:00:05"},{"Servers":"10281","Players":"10415","Retrieved":"2013-07-29 00:00:05"},{"Servers":"10275","Players":"11513","Retrieved":"2013-07-28 23:00:04"},{"Servers":"10271","Players":"13356","Retrieved":"2013-07-28 22:00:05"},{"Servers":"10264","Players":"16443","Retrieved":"2013-07-28 21:00:05"},{"Servers":"10255","Players":"19093","Retrieved":"2013-07-28 20:00:05"},{"Servers":"10247","Players":"19162","Retrieved":"2013-07-28 19:00:04"},{"Servers":"10238","Players":"19187","Retrieved":"2013-07-28 18:00:05"},{"Servers":"10232","Players":"17643","Retrieved":"2013-07-28 17:00:04"},{"Servers":"10226","Players":"17413","Retrieved":"2013-07-28 16:00:04"},{"Servers":"10217","Players":"16721","Retrieved":"2013-07-28 15:00:06"},{"Servers":"10204","Players":"15756","Retrieved":"2013-07-28 14:00:05"},{"Servers":"10194","Players":"14853","Retrieved":"2013-07-28 13:00:04"},{"Servers":"10181","Players":"14262","Retrieved":"2013-07-28 12:00:06"},{"Servers":"10177","Players":"13976","Retrieved":"2013-07-28 11:00:04"},{"Servers":"10167","Players":"13895","Retrieved":"2013-07-28 10:00:06"}];
// Set the dimensions of the canvas/graph
var margin = {top: 30, right: 50, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Parse the date/time
var parseDate = d3.time.format.iso.parse;
// Set the ranges
var x = d3.time.scale()
.range([0, width])
;
var y = d3.scale.linear()
.range([height, 0])
;
// Define the axes
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(12)
//.tickFormat(d3.time.format("%H:%M"))
;
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
// Define the lines
var serversLine = d3.svg.line()
.interpolate("step-before")
.x(function(d) { return x(parseDate(d.Retrieved)); })
.y(function(d) { return y(d.Servers); });
var playersLine = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(parseDate(d.Retrieved)); })
.y(function(d) { return y(d.Players); });
// Adds the svg canvas
var chart = 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 + ")");
// Scale the range of the data
x.domain(d3.extent(live, function(d) { return parseDate(d.Retrieved); }));
y.domain([0, d3.max(live, function(d) { return Math.max(d.Servers, d.Players); })]);
var xord = d3.scale.ordinal()
.domain(d3.range(live.length))
.rangeRoundBands([0, width], 0.05);
// Display Bar Chart
chart.selectAll("container")
.data(live)
.enter()
.append("rect")
.attr("class", "bar-class")
.attr("x", function(d) { return x(parseDate(d.Retrieved)); })
.attr("y", function(d) { return y(d.Servers); })
.attr("width", xord.rangeBand())
.attr("height", function(d) { return height - y(d.Servers); })
;
chart.append("path")
.attr("class", "players-class")
.attr("d", playersLine(live));
// Add the X Axis
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
d3.select("#click")
.on("click", function() {
// Scale the range of the data
x.domain(d3.extent(test, function(d) { return parseDate(d.Retrieved); }));
y.domain([0, d3.max(test, function(d) { return Math.max(d.Servers, d.Players); })]);
var xord = d3.scale.ordinal()
.domain(d3.range(test.length))
.rangeRoundBands([0, width], 0.05);
var chart = d3.select("body");
chart.select(".players-class")
.attr("d", playersLine(test));
chart.select(".x.axis")
.call(xAxis);
chart.select(".y.axis")
.call(yAxis);
var bars = chart.selectAll("rect")
.data(test);
bars.enter()
.append("rect")
.attr("x", function(d) { return x(parseDate(d.Retrieved)); })
.attr("y", function(d) { return y(d.Servers); })
.attr("width", xord.rangeBand())
.attr("height", function(d) { return height - y(d.Servers); })
;
bars.transition()
.duration(750)
.attr("x", function(d) { return x(parseDate(d.Retrieved)); })
.attr("y", function(d) { return y(d.Servers); })
.attr("width", xord.rangeBand())
.attr("height", function(d) { return height - y(d.Servers); })
;
bars.exit()
.remove();
});
OMG 나는 코드를 읽거나 디버깅하는 방법을 알고 싶다.이 행을 제거하는 것이 치료법으로 효과적이라는 것을 알았 으면 좋겠다. 당신, @amakhrov는 스타입니다 - 당신에게 소품과 시간을내어 읽어 주셔서 감사합니다! – jimaroonie