1
D3의 새로운 기능. here으로 표시된 간단한 막 대형 차트 예제를 수정하려고합니다. 데이터를 업데이트하려고하지만 근본적인 것이 누락되었습니다. 나는 here을 따라 가려고하는데, Mike는 객체의 불변성에 대해 이야기한다. 특히, 나는 내 코드에서 다음을 달성하기 위해 시도하고 (내 경우에는, 내 키 기능은이미 존재하는 데이터 포인트를 다시 그리지 않고이 데이터를 어떻게 업데이트합니까?
) this post에 따라, 단순히 ".DATA (데이터)"(확인 인을
Key functions can be useful for improving performance independent of transitions. For example, if you filter a large table, you can use a key function to reduce the number of DOM modifications: reorder DOM elements in the update selection rather than regenerating them. We used this technique at Square to improve the performance of merchant analytics, and it’s one of the reasons that D3 is faster than most template frameworks.
입니다
아래의 코드는 작동하지만 가장 성능이 좋은 것은 아닌 것으로 생각합니다. 예를 들어, 빈도 "70"은 두 데이터 세트에 있지만 데이터를 "제거"하면 효율적으로 다시 그립니다. (먼저 데이터를 "제거"한 다음 업데이트 된 데이터를 가져 오는 기존 차트 대신 다른 차트가 그려집니다.) 아래 코드를 키 기능을 준수하도록 수정하여 두 데이터 집합에있는 데이터가 다시 그려야합니까? 막대 차트 91,363,210내 코드 :
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<button id="change" name="change">Update</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
$(document).ready(function() {
var old_data = [{"letter": "A","frequency": "50"},
{"letter": "B","frequency": "60"},
{"letter": "C","frequency": "70"}, // this also appears in new_data
{"letter": "D","frequency": "80"},
];
draw_chart(old_data);
$("#change").click(function(){
var new_data = [{"letter": "A","frequency": "10"},
{"letter": "B","frequency": "20"},
{"letter": "C","frequency": "70"}, // this appears in old_data
{"letter": "D","frequency": "30"},
];
var bar = d3.select('body').selectAll('svg').remove();// delete this line and you'll get multiple charts rather than just updating the data in the original chart
draw_chart(new_data);
});
});
</script>
<script>
function draw_chart(data){
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = 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 + ")");
data.forEach(function(d) {
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", height)
.attr("height","0")
.transition()
.delay(function(d, i) { return i*300 })
.duration(1000)
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
}
</script>
더 이상 질문이 있으십니까? – enjoylife