基于百分比的D3js和变量

我正在尝试使用百分比为图表的宽度和高度创建D3js的响应散点图。基于百分比的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"。我能做些什么来解决这个问题，并让情节以百分比工作？

来源

2015-06-03 Himmel

比例不能插值％值 - 您可以使用绝对值或仅使用数字100作为最大值，并在使用特定值计算比例时添加％。 –

可以声明的宽度和高度为数字，像var h = 100;然后添加百分比在attr功能：

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

那么你的SVG可以用设置样式：

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

或者只是使用CSS为了那个原因。这里有一个demo。

来源

2015-06-03 16:50:16 Oleg

如何创建适应'xScale'和'yScale'的轴？ – Himmel

个人而言，我会建议在窗口大小调整上设置事件侦听器，并使用像素值重新渲染图形。 – Oleg

然后，你会使用什么尺寸进行初始渲染，以便它能够响应它打开的窗口大小？ – Himmel

基于百分比的D3js和变量

回答

相关问题