D3軸轉換

可視化是一個條形圖，其中條高的範圍很大（幾個數量級）。我已經建立了一個由點擊觸發的轉換，可以將所有酒吧的高度增加一倍。我還希望y軸刻度和標籤轉換爲條形的新比例。我已經改變了Y軸縮放的範圍。酒吧高度過渡正常工作。軸轉換什麼都不做。我似乎無法獲得正確的軸轉換。誰能幫忙？D3軸轉換

該代碼是我試圖做的一個簡單示例 - 數據是固定的。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="../static/js/d3.js"></script> 
<style type="text/css"> 
.axis, .axis text { 
    font: 10px sans-serif; 
} 

.axis path, .axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.tick text { 
    font-family: sans-serif; 
    fill: black; 
} 
</style> 
</head> 
<body> 
<script type="text/javascript"> 

var xSize = 900, 
ySize = 500; 

var data = [10000, 3000, 100, 40, 10, 5, 1]; 

var margin = {top:40, right: 40, bottom:60, left: 60}; 
var width = xSize - margin.left - margin.right; 
var height = ySize - margin.top - margin.bottom; 

var barwidth = width/data.length; 
var xscale = d3.scale.linear().domain([0, data.length]).range([0, width]); 
var maxData = d3.max(data); 
var yscale = d3.scale.linear().domain([0, maxData]).range([height, 0]); 

var xAxis = d3.svg.axis().scale(xscale).orient("bottom"); 
var yAxis = d3.svg.axis().scale(yscale).orient("left"); 

var fieldView = d3.select("body") 
    .append("svg") 
    .attr("width", xSize) 
    .attr("height", ySize) 
    .on("click", update) 
; 
var chart = fieldView 
    .append("g") 
    .attr("id", "clip") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
; 
var bar = chart.selectAll("g") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("x", function(d, i) {return xscale(i);}) 
    .attr("y", function(d) { return yscale(d);}) 
    .attr("height", function(d) { return height - yscale(d);}) 
    .attr("width", barwidth) 
    .attr("fill", "steelblue") 
    .attr("clip-path", "url(#clip)") 
; 

chart.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
; 

chart.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
; 

var transitionScale = 1; 
var transitionMultiplier = 5; 
var transitionYscale = d3.scale.linear().domain([0, maxData]) 
    .range([height, 0]); 
function update() { 
    // new multiplier for data 
    transitionScale *= transitionMultiplier; 
    // update to y axis domain 
    yscale.domain([0, maxData/transitionScale]); 
    // transition the bars 
    bar 
     .transition() 
     .attr("y", function(d) {return yscale(d);}) 
     .attr("height", function(d) {return height - yscale(d);}) 
     .duration(2000) 
     .ease("linear") 
    ; 
    // transition the y-axis 
    chart 
     .selectAll(".y axis") 
     .transition() 
     .call(yAxis) 
    ; 
} 
</script> 
</body> 
</html>

來源

2016-01-11 Michael Lay

從改變軸過渡選擇：

chart.selectAll（」 Y軸「）

到：

chart.selectAll（」。 y.axis「）

會導致軸正確轉換。不過，我不知道爲什麼。

來源

2016-01-13 11:23:12

啊，我這樣做。「chart.selectAll（」.y axis「）」是一個無效的選擇，因爲dom中沒有元素。通過該選擇，您試圖選擇具有類「y」的父元素的所有元素。另外，當你創建軸時，你需要：「.attr（」class「，」x axis「）」。你實際上在元素上設置了2個類。所以如果你想要選擇具有這兩個類的所有元素，你需要做chart.selectAll（「.y.axis」）。我希望這是有道理的:-) –

我想我明白了。由於我在創建dom對象「g」以包含y軸時設置了兩個類「y」和「axis」，因此「chart.selectAll（」。y「）足以選擇y軸進行轉換。發現這是真的。謝謝你的幫助。 –

是的，你是對的！我的榮幸 –

回答

相關問題