How may I pass the self $(this) parameter into the d3 selector?

/

function d3_bar(self, dataset, barPadding) {

   var w = parseInt(d3.select(".barChart").style("width"),10), // select(self)
       h = parseInt(d3.select(".barChart").style("height"),10); // select(self)

    var svg = d3.select(".barChart") // select(self)
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - (d * 4);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
            return d * 4;
        })
        .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        });

}

$('.barChart').each(function(i) { 

    var self = $(this),
        nums = self.data('value').split(',').map(Number);

        d3_bar(self, nums, 1);

});

How may I pass the self $(this) parameter into the d3 selector?

http://jsfiddle/6q0vvsja/

function d3_bar(self, dataset, barPadding) {

   var w = parseInt(d3.select(".barChart").style("width"),10), // select(self)
       h = parseInt(d3.select(".barChart").style("height"),10); // select(self)

    var svg = d3.select(".barChart") // select(self)
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - (d * 4);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
            return d * 4;
        })
        .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        });

}

$('.barChart').each(function(i) { 

    var self = $(this),
        nums = self.data('value').split(',').map(Number);

        d3_bar(self, nums, 1);

});

• javascript
• jquery
• d3.js

• 1 Did you try to just pass in the element like so var svg = d3.select(self[0]) ? – DavidDomain Commented Jul 16, 2015 at 7:07
• Unless I'm missing something you can simply to d3.select(this). – Lars Kotthoff Commented Jul 16, 2015 at 16:26
• 1 How will that know which initiation of the each its in, though? – ditto Commented Jul 16, 2015 at 16:27

2 Answers 2

Your self variable is a jQuery object and D3js will expect a selector or DOM Element (Node).

d3.select(selector)

Selects the first element that matches the specified selector string, returning a single-element selection. If no elements in the current document match the specified selector, returns the empty selection. If multiple elements match the selector, only the first matching element (in document traversal order) will be selected.

d3.select(node)

Selects the specified node. This is useful if you already have a reference to a node, such as d3.select(this) within an event listener, or a global such as document.body. This function does not traverse the DOM.

-

Selecting Elements

...These methods can also accept nodes, which is useful for integration with third-party libraries such as jQuery

To get the underlying JavaScript DOM element from a jQuery object you can just do

$('#myElem')[0];

So in your case you can pass in the JavaScript DOM element to the d3.select like so

var svg = d3.select(self[0])...

Why and how this works is explained here.

function d3_bar(self, dataset, barPadding) {

  var w = parseInt(d3.select(".barChart").style("width"),10);
  var h =  parseInt(d3.select(".barChart").style("height"),10);

  var svg = d3.select(self[0])
  .append("svg")
  .attr("width", w)
  .attr("height", h);

  svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i * (w / dataset.length);
  })
  .attr("y", function(d) {
    return h - (d * 4);
  })
  .attr("width", w / dataset.length - barPadding)
  .attr("height", function(d) {
    return d * 4;
  })
  .attr("fill", function(d) {
    return "rgb(0, 0, " + (d * 10) + ")";
  });

}

$('.barChart').each(function(i) { 

  var self = $(this),
      nums = self.data('value').split(',').map(Number);

  d3_bar(self, nums, 1);

});

.barChart:first-child {
  height:200px;
  width:500px;
}

.barChart:last-child {
  height:10px;
  width:50px;
}

<div class="barChart" data-value="5,10,13,19,21,25,22,18,15,13,11,12,15,20,18,17,16,18,23,25"></div>
<div class="barChart" data-value="1,5,2,2,5,1,0,7,5,3"></div>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alignedleft./content/03-tutorials/01-d3/d3/d3.v3.min.js"></script>

Do not mix up jQuery object with d3.js. var self = $(this), self is a jQuery object, d3.js does not recognize it.