score:1
i've tried by removing the outer circle and using the square only for mouseover events. it is a completely transparent rgba(0,0,0,0)
"hitbox" now. also prevented the small family circles from becoming squares with d.sex === 'f' || d.type === 'family'
the pie/square slices are enough to draw the full shape, you have done that successfully. i think you should try to apply the stroke/fill options on the small portions and leave the hover events to a transparent larger box so you don't need to apply it repetitively. (until, of course, you want these smaller sections to fire separate events)
here's your jsfiddle edited so far: https://jsfiddle.net/wa30rgb2/1/
Source: stackoverflow.com
Related Query
- How to determine a SVG shape based off of data using d3.js
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How to color SVG image based on value from color range using d3?
- How to update all data representing an SVG line using d3?
- In D3 I'm assigning a colour to a data category using d3.scale.ordinal(). How can I assign it based on value of x-axis?
- How to rearrange the DOM order of svg elements based on their data values in a dynamically changing d3 vis?
- How to modify the content of an svg based dom using nodejs, d3 and jsdom?
- How to add an image to an svg container using D3.js
- How do I get the width of an svg element using d3js?
- In d3, how to get the interpolated line data from a SVG line?
- How to import XML data using d3.js?
- How do I create a tree layout using JSON data in d3.v4 - without stratify()
- How to drag an svg group using d3.js drag behavior?
- how to create labels for data in donut chart using d3.js
- How can I dynamically resize an SVG rect based on text width?
- Using d3.js, how can I display data faster on my chart?
- How to determine nearby SVG elements on a mouse event?
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- how to access data of a d3 SVG Element
- How to get reference to SVG (child) elements nested in another SVG element (parent) using D3?
- How to update elements of an HTML that the elements are created using data from a CSV file?
- How to add filled sections to SVG circles using d3.js
- How to output SVG in a Jupyter notebook using jsdom, D3 and IJavascript
- How to apply specific colors to D3.js map based on data values?
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How do i add two different shapes to D3 forced directed graph based on shape field value?
- Programmatically determine shape generated by SVG path
- How to create SVG elements of different types based on data?
- How to visualize mysql data in d3js using django?
- How to render end ticks always using d3 svg axis
More Query from same tag
- Using D3.js with Angular 2
- String x ticks not scaling data in D3
- Selection does not work if "too exact"
- In D3 how to enable zooming only for particular path?
- D3.js y- axis ticks and grid lines do not align
- D3.js: Get an array of the data attached to a selection?
- nvd3.js line chart -- add vertical lines
- d3.js force-collapsible with labels
- D3 On-Click zoom to a specific node
- Dimple js modify scatter shape
- c3js Multi color design
- Resizing D3 force layout
- d3.js data array if statement
- Reverse the direction of the color in linear gradient legend
- How to display just the weekdays on x-axis?
- d3 vary line/area color along x-axis in line graph
- How to create a multi-series line chart with series for each unique item in 1st column?
- Line - area chart not showing
- I am trying to inject a partial template in Angular that contains a graph
- Chart Drawn Incorrectly when using NVD3
- D3 line style when using step-before or step-after interpolation
- Convert Curve path to straight path using jquery with animation
- d3 - how to figure out when elements go offscreen?
- Error: Type "SVGAnimatedLength' has no call signatures" when calling from class
- Line not visible in line chart when having same value in the domain() - using D3
- D3 Changing the width attribute of an object depending on it's child
- Javascript looping through elements and adding to table
- How to select the color of node on data value and the Data value of tool as name?
- capturing pointer events in overlapping g-elements in a svg
- dynamic js with phantomjs in local html file