將軸附加到D3圖表

我正在通過一本關於使用D3進行數據可視化的書。我很喜歡這個，我正在嘗試添加座標軸到我的圖表。示例代碼可以工作，但由於某種原因，當我嘗試將軸類添加到我的SVG元素時，它將無法工作。將軸附加到D3圖表

我的代碼如下：

function draw(data) { 
    //code 
    "use strict"; 

var margin = 50, 
    width = 700, 
    height = 300; 
    var x_extent = d3.extent(data, function(d){return d.collision_with_injury}); 
    var y_extent = d3.extent(data, function(d){return d.dist_between_fail}); 

var x_scale = d3.scale.linear() 
    .range([margin, width-margin]) 
    .domain(x_extent); 

var y_scale = d3.scale.linear() 
    .range([height-margin, margin]) 
    .domain(y_extent); 

var x_axis = d3.svg.axis().scale("x_scale"); 
var y_axis = d3.svg.axis().scale("y_scale").orient("left"); 

    d3.select("body") 
    .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
    .selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d){return x_scale(d.collision_with_injury)}) 
    .attr("cy", function(d){return y_scale(d.dist_between_fail)}) 
    .attr("r", 5) 

    d3.select("svg") 
      .append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + (height-margin) + ")") 
      .call(x_axis); 

    d3.select("svg") 
     .append("g") 
      .attr("class", "y axis") 
      .attr("transform", "translate(" + margin +", 0)") 
     .call(y_axis) 

    d3.select('.y axis') 
    .append('text') 
    .text('mean distance between failure (miles)') 
    .attr('transform', "rotate (-90, -43, 0) translate(-280)") 

    d3.select('.x axis') 
    .append('text') 
    .text('collisions with injury (per million miles)') 
    .attr('x', function(){return (width/2) - margin}) 
    .attr('y', margin/1.5) 
}

來源

2013-07-16 Siya

類名不能包含空格。當您運行代碼.attr("class", "x axis")時，您實際上將兩個類x和axis分配給元素。這不是一個問題，但選擇器.y axis不能按照您所期望的那樣工作，原因相同。它試圖找到類y和axis標籤的元素（因爲您沒有在它前面放點）。這失敗了，因爲沒有這樣的元素。

解決這個問題的最簡單方法可能是簡單地指定一個單詞的類， xAxis。或者，您可以將選擇器更改爲.y .axis以匹配具有這兩個類的元素。

來源

2013-07-16 20:40:51

嗨拉爾斯我改變了我的代碼，以符合你的建議，我仍然沒有看到軸。 .x.axis被附加到SVG中，但沒有任何值填充它，並且不會附加.y.axis。有任何想法嗎？ – Siya

這聽起來像是一個尺度問題。您是否確認所有數據都被正確讀取，並且秤的範圍計算是否正確？ –

我需要研究這一點，我懷疑這也與數據和可能不能很好地讀取數據的代碼有關。謝謝拉爾斯。 – Siya

將軸附加到D3圖表

回答

相關問題