Question

我使用d3.js v3实现了散点图。

如果已添加特定数据点注释，我想更改数据点的颜色。

但是当我尝试这样做时，它正在改变数组中第一个数据点的颜色，而不是添加注释的圆圈。

我实施的方式是：

eventGroup.select("circle")
    .attr("class", "dot")
    .attr("r", 4)
    .attr("cx", 10)
    .attr("cy", 10)
    .attr("fill", function(d) {
        return d.evtColor ? d.evtColor : "#229ae5";
    })
    .attr("stroke", function(d) {
        return d.evtColor ? d.evtColor : "#229ae5";
    })
    .attr("stroke-width", 2)
    .on("contextmenu", function(d) {
        var position = d3.mouse(this.parentNode);
        d3.event.stopPropagation(); // to avoid over-ridding of click event on the chart background
        d3.select("#context-menu")
            .style("position", "absolute")
            .style("left", (d3.event.pageX - 220) + "px")
            .style("top", (d3.event.pageY - 70) + "px")
            .style("display", "inline-block")
            .on("click", function() {
                d3.select("#context-menu").style("display", "none");
                d3.select("#annotateBox")
                    .style("position", "absolute")
                    .style("left", (d3.event.pageX - 220) + "px")
                    .style("top", (d3.event.pageY - 70) + "px")
                    .style("display", "inline-block");
                d3.select("#eventLabel").text(d.label);
                d3.select("#eventTime").text(d.time);
                d3.select("#textArea").node().value = d.textArea || "";
                d3.select("#done").on("click", function() {
                    d.textArea = d3.select("#textArea").node().value;
                    d3.select("#annotateBox").style("display", "none");
                    if (d.textArea) {
                        d3.select("circle.dot").style("fill", "#ed6a1c");
                    }
                });
            });
    });

我不能d3.select(this.parentNode)，因为父元素不是circle.dot。应该选择哪个元素来更改添加了注释文本的基准面的颜色？

Answer 1

保持对点击的DOM元素（即圆圈）的引用...

.on("contextmenu", function(d) {
    var thisCircle = this
    etc...

然后使用它：

if (d.textArea) {
    d3.select(thisCircle).style("fill", "#ed6a1c");
}

根据文本区域更改数据点的样式

1 个答案: