CODEWITHSUNDEEP
javascriptd3.js
Jezen Thomas
Jezen Thomas

Reputation: 13800

Select d3 node by its datum

I’d like to select a node in a callback without using d3.select(this).

I have some code that draws a pie…

function drawPie(options) {
  options || (options = {});
  var data = options.data || [],
      element = options.element,
      radius = options.radius || 100,
      xOffset = Math.floor(parseInt(d3.select(element).style('width'), 10) / 2),
      yOffset = radius + 20;

  var canvas = d3.select(element)
              .append("svg:svg")
              .data([data])
              .attr("width", options.width)
              .attr("height", options.height)
              .append("svg:g")
              .attr("transform", "translate(" + xOffset + "," + yOffset + ")");

  var arc = d3.svg.arc()
    .outerRadius(radius);

  var pie = d3.layout.pie()
    .value(function(data) {
      return data.percentageOfSavingsGoalValuation;
    });

  var arcs = canvas.selectAll("g.slice")
    .data(pie)
    .enter()
    .append("svg:g")
    .attr("class", "slice");

  arcs.append("svg:path")
    .on("mouseover", divergeSlice);

You’ll notice at the end I have a call to divergeSlice(). That looks like this:

function divergeSlice(datum, index) {
  var angle = (datum.endAngle + datum.startAngle) / 2,
      x = Math.sin(angle) * 10,
      y = -Math.cos(angle) * 10;

  d3.select(this)
    .transition()
    .attr("transform", "translate(" + x + ", " + y + ")");
}

This works, but I’d like to accomplish this without using this as I mentioned earlier. When I log the datum object, I get something like the following:

{
  data: {
    uniqueID: "XX00X0XXXX00"
    name: "Name of value"
    percentageOfValuation: 0.4
    totalNetAssetValue: 0
  }
  endAngle: 5.026548245743669
  innerRadius: 80
  outerRadius: 120
  startAngle: 2.5132741228718345
  value: 0.4
}

How could I use d3.select() to find a path that holds datum.data.uniqueID that is equal to "XX00X0XXXX00"?

Upvotes: 20

Views: 14778

Answers (2)

Gaibiso Nadaf
Gaibiso Nadaf

Reputation: 1

This above code not working for me Make all non-matching nodes and all edges disappear for 5 seconds.

function searchNodes(term) {

    d3.selectAll('g.node_container')
    .transition()
    .duration(5000)
    .style('opacity', '0');

    var link = d3.selectAll('.link_container');
    link.style('stroke-opacity', '0');

    d3.selectAll('.link_container')
    .transition()
    .duration(5000)
    .style('stroke-opacity', '0');

    var term = 'DLDELBRACAC01CA';

         var selected = d3.selectAll('g.node_container')
        .filter(function(d) {
         if(d.id == term)
         {
              return true;
         }
     })
    .style('opacity', '9');

    let neighboringNodes = d3.selectAll('g.node_container')
        .filter(function(d) {
            return selected.nodes().includes(d) || d3.selectAll('.link').filter(function(l) {
                return selected.nodes().includes(l.source) && selected.nodes().includes(l.target);
            }).nodes().includes(this);
        });

    let neighboringEdges = d3.selectAll('.link_container')
    .filter(function(d) {
        return neighboringNodes.nodes().includes(d.source) && neighboringNodes.nodes().includes(d.target);
    });
    //debugger;
    neighboringNodes.style('opacity', '1');
    neighboringEdges.style('stroke-opacity', '1');
  
    
}

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You can't do this directly with .select() as that uses DOM selectors. What you can do is select all the candidates and then filter:

d3.selectAll("g")
  .filter(function(d) { return d.data.uniqueID === myDatum.data.uniqueID; });

However, it would be much easier to simply assign this ID as an ID to the DOM element and then select based on that:

var arcs = canvas.selectAll("g.slice")
  .data(pie)
  .enter()
  .append("svg:g")
  .attr("id", function(d) { return d.data.uniqueID; })
  .attr("class", "slice");

d3.select("#" + myDatum.data.uniqueID);

Upvotes: 41

Related Questions