CODEWITHSUNDEEP
javascriptd3.js
user2128
user2128

Reputation: 640

Change style of the data point based on the text area

I have implemented a scatterplot using d3.js v3.

I would like to change the color of the datapoint if for that particular data point annotation has been added.

But when I try to do so, it is changing the color of the first data point in the array instead of the the circle where the annotation has been added.

The way I am implementing is :

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");
                    }
                });
            });
    });

I cannot do d3.select(this.parentNode) as the parent element is not the circle.dot. What element should be selected in order to change the color of datum where annotation text has been added?

Upvotes: 1

Views: 47

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Keep a reference to the clicked DOM element (i.e., the circle)...

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

And use it afterwards:

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

Upvotes: 1

Related Questions