score:8
i would recommend manually drawing the arcs with svg's path.
first, here is a working example with the additions: https://jsfiddle.net/mztafs0w/
explanation:
svg path has commands such as m for move, a for arc, l for draw line to:
- capital letters are absolute pixel movements
- lowercase letters are relative pixel movements
to make a filled pie slice using svg path, you must perform these actions:
let's say your radius is 40 and you want a slice for the top-right quadrant. the entire command for this would be:
- move x(0) y(-40) -- move to top
- arc x-radius(40) y-radius(40) xrot(0) >180deg?(0) sweep(1) x(40) y(0) -- arc to right
- line x(0) y(0) -- return to center
compressed into svg path format, this appears as:
m 0 -40 a 40 40 0 0 1 40 0 l 0 0
(minimally, m0,-40a40,40,0,0,1,40,0l0,0
)
performing this 4 times to get all 4 quadrants is simple enough, and replacing radius with ${r} allows the size to be easily adjusted.
the final code added to your js fiddle:
var slices=[];
slices[0] = node.append("path")
.attr("d", function(d) {
let r = d.type == "family" ? family_radius + 5 : 40;
return `m 0 -${r} a ${r} ${r} 0 0 1 ${r} 0 l 0 0`; } )
.attr("fill", "coral");
slices[1] = node.append("path")
.attr("d", function(d) {
let r = d.type == "family" ? family_radius + 5 : 40;
return `m ${r} 0 a ${r} ${r} 0 0 1 0 ${r} l 0 0`; } )
.attr("fill", "royalblue");
slices[2] = node.append("path")
.attr("d", function(d) {
let r = d.type == "family" ? family_radius + 5 : 40;
return `m 0 ${r} a ${r} ${r} 0 0 1 -${r} 0 l 0 0`; } )
.attr("fill", "olivedrab");
slices[3] = node.append("path")
.attr("d", function(d) {
let r = d.type == "family" ? family_radius + 5 : 40;
return `m -${r} 0 a ${r} ${r} 0 0 1 0 -${r} l 0 0`; } )
.attr("fill", "goldenrod");
i recommend you remove the non-working describearc section and make the code more dry. you may perform more calculations to have the circle slices break at places other than 0/90/180/270. let me know if you need help with any of those, or you may check the image source for more tips.
i also changed the family_radius to family_radius + 5 so you can see the arcs being drawn underneath the white fill of those smaller circles. if this is not desirable you may either remove the white fill on these circles (line 165 if(d.type == "family"){return "white"}
) or simply not draw these slices at all for those circles.
Source: stackoverflow.com
Related Query
- How to add filled sections to SVG circles using d3.js
- How to add an image to an svg container using D3.js
- How to redraw the svg filled with circles in D3?
- How to add tooltip to an svg graphics element using javascript
- How can I add text to SVG elements in D3 using the example below
- how to create circles with text over svg file using d3 js?
- How to add a tooltip to an svg graphic?
- How to add border/outline/stroke to SVG elements in CSS?
- How do I get the width of an svg element using d3js?
- How to add using d3.js selection.text() method
- How to drag an svg group using d3.js drag behavior?
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- How to get reference to SVG (child) elements nested in another SVG element (parent) using D3?
- how to add legend to a pie chart using D3js? And how to centralise the pie chart?
- How to fill an image inside my svg circles in d3.js
- How to remove shapes from filled SVG path
- How to output SVG in a Jupyter notebook using jsdom, D3 and IJavascript
- How to add external svg file (by D3.js) to Leaflet map
- How to render end ticks always using d3 svg axis
- How do I create a minimap of an SVG using D3 v5 and show the current viewport dimensions?
- How to plot svg circles on curved line in d3 js?
- How to add a line graph to a scatterplot using d3?
- How do I save an svg node to a file using nodejs?
- how to add dragend event on svg element
- using foreignObject to add SVG dynamically using D3js
- How to create a flow layout in SVG using D3.js?
- How to add all but a few columns using javascript and d3
- How can I add images in the nodes of a D3 Sankey diagram, using the rcv and networkD3 packages in R?
- How to select and deselect a svg line and change its color on selection and deselection using d3.js and javascript , jquery?
- how to add mouse events to force directed graph using the d3 canvas renderer?
More Query from same tag
- How do I access the output of JavaScript function outside the function?
- d3js: scatterplot zoom. Only axis is zooming not the data
- How to generate a d3 selection consisting exactly of a DOM element and all its descendants?
- d3: why is variable set inside d3.json not accesible outside?
- Avoid overlapping of nodes in tree layout in d3.js
- Turn off clipping in a d3 projection
- Create a JSON file from a Flask view to be used with D3
- Callbacks with D3
- Wrapping multi line labels
- D3 v4 - Get current zoom scale?
- Ajax not working. Output not showing up
- Add/update labels to a d3.js graph
- d3.event object in QtWebKit
- Making a Sankey diagram in R for printing
- How to make SVG:A elements clickable when using D3.js Pan & Zoom behaviour?
- How do append a <text> for every element of the data in a D3 svg
- D3 Crossfilter basic example
- Workaround for tipsy, svg and css in firefox?
- D3-request retrieval of a google spreadsheet csv/json file fails
- format flare.jason from existing json
- D3.js - puzzling interpretation of a JSON file?
- Data not populating in d3
- Staggered transition in multi line graph
- D3 how to remove tick dots from opaque scale
- Fixed center with dynamic axis scaling
- C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , "ERROR: Element 'parsererror' not yet implemented"
- D3, SVG and textPath: How to move the text down?
- D3 "Sunburst" Center Path Size
- Converting from v3 to v5 in d3 doesn't update the visualization but adds another one
- Adding Dynamic Node in D3 Tree