D3js和基于百分比的变量

D3js and Variables Based on Percentages

本文关键字：变量 百分比 D3js      更新时间：2023-09-26

我试图用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的性质，圆圈是从左上角显示的，而不是左下角的典型原点。为了扭转这种情况，通常我会将yScale range值切换为[h, 0]而不是[0, h]。当我这样做时，我得到一个错误Error: Invalid value for <circle> attribute cy="NaN"。我能做些什么来解决这个问题，并有百分比的情节工作?

您可以将宽度和高度声明为数字，如var h = 100;，然后在attr函数中添加百分比:

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

那么你的svg可以样式为:

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

或者直接使用CSS。这是一个演示

相关文章：