Im trying to filter a dataset to only display labels for some select elements. The filter shown here seems to work, except it creates thousands of blank elements, which I obviously want to avoid. This is because the filter comes after the append, but if I move the filter above the append statement , it breaks.
What am i doing wrong here
var labels = svg.selectAll("text.label")
.data(partition.nodes(bp.data.preparedData))
.enter()
.append("text")
.filter(function(d){return d.ci_type === 'type'})
.attr("class", "label")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.text(function(d, i) { return d.name } );
filter() function in d3. js is used to filter the given selection and return a new selection for which the filter is true. The filter to be used may be a string or a function.
The JavaScript ecosystem has completely changed during this time, in terms of libraries, best practices and even language features. Nevertheless, D3 is still here. And it's more popular than ever.
three. js, Plotly. js, Highcharts, Python, and Tableau are the most popular alternatives and competitors to D3. js.
Conclusion. D3. js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG. There are a lot of good resources available online to learn D3.
It sounds like you want to filter your data before passing it to D3. That is, your code would be
var labels = svg.selectAll("text.label")
.data(partition.nodes(bp.data.preparedData).filter(
function(d){return d.ci_type === 'type'}))
.enter()
.append("text")
.attr("class", "label")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.text(function(d, i) { return d.name } );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With