Question

我尝试使用D3js创建一个响应式散点图，使用图表宽度和高度的百分比。

所以，我将这些变量声明为最重要的：

 string searchPhone;
 if (contactList.TryGetValue(text.Name, out searchPhone))
     ... found, use searchPhone
 else
    ... not found

我的var w = '100%'; var h = '100%';和xScale正常工作，以及我的输出圈在SVG中的位置：

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); yScale值切换为range而不是[h, 0]。当我这样做时，我收到错误[0, h]。我该怎么做才能解决这个问题并让情节与百分比一起工作？

Answer 1

您可以将宽度和高度声明为数字，例如attr，然后在.attr('cx', function (d) { return xScale(d["ttc"]) + '%'; })函数中添加百分比：

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

然后你的svg可以设置为：

composer.addPass normal
composer.addPass mask
composer.addPass outline
composer.addPass clearMask
composer.addPass copyPass

或者只是使用CSS。这是demo。

基于百分比的D3js和变量

1 个答案: