Passing $ (this) to selector d3
How do I pass the self parameter $(this)
to 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);
});
source to share
Your variable self
is a jQuery object and D3js expects a selector or DOM element (Node).
d3.select (selector)
Selects the first element that matches the specified selector string, returning a singleton selection. If no element in the current document matches the specified selector, returns an empty selection. If multiple elements match a selector, only the first matching element will be selected (in document traversal order).
d3.select (Node)
Selects the specified node. This is useful if you already have a node reference like d3.select (this) inside an event listener or a global one like document.body. This function does not traverse the DOM.
-
Selecting items
... These methods can also accept nodes which are useful for integration with third party libraries like jQuery
To get a basic JavaScript DOM element from a jQuery object, you can simply do
$('#myElem')[0];
So, in your case, you can pass a JavaScript DOM element in d3.select
such that
var svg = d3.select(self[0])...
Why and how it 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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alignedleft.com/content/03-tutorials/01-d3/d3/d3.v3.min.js"></script>
source to share