Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3 JS Data Filtering

Tags:

d3.js

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 } );
like image 379
Cheyne Avatar asked Apr 26 '13 20:04

Cheyne


People also ask

What does filter do in D3?

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.

Do people still use D3 JS?

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.

What is better than D3 JS?

three. js, Plotly. js, Highcharts, Python, and Tableau are the most popular alternatives and competitors to D3. js.

Is D3 js easy?

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.


1 Answers

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 } );
like image 187
Lars Kotthoff Avatar answered Sep 27 '22 18:09

Lars Kotthoff