score:3
Accepted answer
inside of your click function set the visible flag on all the lines:
.on("click", function(d){ // on click make d.visible
// visible is true if the start of the name matches
categories.foreach(function(e){
e.visible = e.name.slice(0, 5) == d.name.slice(0, 5)
})
http://codepen.io/1wheel/pen/bwyaqe?editors=0011
to turn multiple sections on at once, flip the visible flag for just categories that match:
.on("click", function(d){
categories.foreach(function(e){
e.visible = e.name.slice(0, 5) == d.name.slice(0, 5) ? !e.visible : e.visible
})
Source: stackoverflow.com
Related Query
- Trigger several buttons and lines at once D3.js
- Could someone once and for all please explain Cannot call determinedVisibility() - never saw a connection for the pid
- D3: skip null values in line graph with several lines
- d3 bar chart y axis ticks and grid lines above max value
- dc.js simulate click on chart and trigger filter on
- Groups and lines from nested data
- D3 Chart- place space between tick values and axis path lines
- Align lines and dots with x-axis values in line chart
- D3 grid lines and tick values issues
- Mouseover issues in D3.js, containing Path elements and changing tooltip data once focus is brushed?
- D3 - Placing labels and lines on a half pie/half donut chart
- getBBox() and getComputedTextLength() once working, once not
- Breaking text from json into several lines for displaying labels in a D3 force layout
- d3 lines and circles data
- Radio buttons in D3: how to align text correctly and select a default?
- How to point intersection of lines in svg and d3.js?
- svg rendering order of lines and shapes when using d3
- Incomplete line chart with missing points and missing lines
- D3.js y- axis ticks and grid lines do not align
- Labels and Dividing Lines in D3
- How to properly assign separate colors to different lines and line series in D3 Dimple?
- How to remove double grid lines and force y to the origin
- Why the graph lines are off axis Y and X?
- D3 axis ticks and grid lines do not align
- How can you draw a collection of lines and points based on categorical data in D3?
- Add data points and text to lines on a multi-bar graph with lines
- D3 Transition. Working with multiple lines on line graph and would like to transition smoothly between lines when button is pressed
- Zoom axis works but stem lines and circle not work
- How to normalize data in d3 and plot the lines in the axis independent of other line ranges
- Add Static Lines on D3 Map Between Latitude and Longitude Points
More Query from same tag
- Changing Element Position on Page JS/D3
- D3 Mouse Events -- Click & DragEnd
- Append child only to new elements, D3.js
- Memory leak with d3.js keyed join in event handler closure
- Sales pipeline chart
- How to change JSON data to Javascript array of objects with D3
- Loading SVG images on a map without D3.js is setting them to wrong position
- How can I simulate an axis 'growing' from range([0,0]) to my specified range in d3?
- D3.js: How can I put an image on the background of a circle with the remaining parts trimmed and make it resize along with the circle onclick?
- D3.js column chart inversing when adding text
- C3.js, y-axis time
- SVG links not working after transition executed in d3.js
- How to Hide Overlapping Text of Labels in D3 Zoomable Pack Layout?
- Why exit() not work here?
- radar chart with boxplot/ Violin plot
- d3 tree - parents having same children
- NVD3 - Adding extra functionality to legend click without overriding existing
- Add a slider in d3.js element
- JSON instead of CSV for bubble chart
- D3 data binding (two dimensional array)
- Obtain access to parent node from inside attrTween callback function (D3)
- Keep stroke-dasharray consistent when path length is changing
- Selection not updating data
- c3.js - how to show hand cursor on bar chart hover
- Circles disappear on mobile, when map is zoomed
- Why does D3 circle position virtually reset after drag
- C3js Quit curve on data point with zero value
- d3.js: Handling multiple brushes
- d3: Brush with an input field
- Resize graph plotted in d3.js graph