基於百分比的D3js和變量

Question

我正在嘗試使用百分比爲圖表的寬度和高度創建D3js的響應散點圖。

所以，我這些變量聲明往上頂：

var w = '100%'; 
var h = '100%'; 

我xScale和yScale正常工作，與我的輸出圈在SVG放置一起：

var xScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d["ttc"]; })]) 
     .range([0, w]); 

    var yScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d["ctc"]; })]) 
     .range([0, h]); 

    var svg = d3.select(el) 
     .append('svg') 
     .attr('height', h) 
     .attr('width', w); 


    svg.selectAll('circle') 
     .data(data) 
     .enter() 
     .append('circle') 
     .attr('cx', function(d) { return xScale(d["ttc"]); }) 
     .attr('cy', function(d) { return yScale(d["ctc"]); }) 
     .attr('r', 10); 

然而，由於根據SVG的性質，從左上角顯示圓圈，而不是左下角的典型原點。爲了扭轉這種情況，通常我會將yScalerange值切換爲[h, 0]而不是[0, h]。當我這樣做時，我收到錯誤Error: Invalid value for <circle> attribute cy="NaN"。我能做些什麼來解決這個問題，並讓情節以百分比工作？

Answer 1

可以聲明的寬度和高度爲數字，像var h = 100;然後添加百分比在attr功能：

.attr('cx', function (d) { 
    return xScale(d["ttc"]) + '%'; 
}) 

那麼你的SVG可以用設置樣式：

.attr('height', h + '%') 
.attr('width', w + '%') 

或者只是使用CSS爲了那個原因。這裏有一個demo。