javascript - 在定义我的圆的坐标时添加到我当前的 attr cx 值

Question

下面给出的是我定义在图表上绘制点的位置的代码。问题是，我通过 xMap 获得的值有一点偏差，所以我想给它加 10 分。然而，这是不可能的，因为 xMap 不是一个简单的数值。

var dot = svg.selectAll("circle")
.data(data3)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", "rgb(0,0,0)")

下面给出了到达 xMap 的代码：

var y = d3.scale.linear()
.domain([0, 100])
.range([height, 0]);
var xValue = function(d) {return d.Score;}
var xMap = function(d) { return x(xValue(d));}

理想情况下我只想说

.attr("cx", xMap + 5)

但这会导致错误“错误：属性cx：预期长度，”函数（d）{重新......“......”

提前致谢！

标签： javascriptd3.js

Answer 1

您可以使用以下解决方案来解决您的问题：

var dot = svg.selectAll("circle")
    .data(data3)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 7)
    .attr("cx", d => x(d.Score) + 5)
    .attr("cy", d => y(d.value))
    .style("fill", "black");