score:3
Accepted answer
these are the problems:
you're setting the start angle and the end angle in your arc generator:
var arcshape = d3.svg.arc() .innerradius(425) .outerradius(575) .startangle(0) .endangle(2*math.pi);
drop that:
var arcshape = d3.svg.arc() .innerradius(425) .outerradius(575);
to access the data of your slices, you have to use
d.data
:.style("fill", function(d) { return d.data.tcolor });
the
value
really doesn't matter, because all the slices have the same length. you can return any number:.value(function(d) { return 1 });
also, use .style("text-anchor", "middle")
for the texts.
here is your code with those changes:
var w = 500;
var h = 500;
var svgbody = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
//doing the connection of tags to annulus
var tags = [{
tag: "translation",
authors: "smith",
tcolor: "blue"
}, {
tag: "code",
authors: "finch",
tcolor: "green"
}, {
tag: "samples",
authors: "chang",
tcolor: "red"
}, {
tag: "nodes",
authors: "thomas",
tcolor: "yellow"
}];
//shape of the outer ring (tags)
var arcgroup = svgbody.append("g") //.data(tags)
.attr("transform", "translate(250,250)");
var arcshape = d3.svg.arc()
.innerradius(200)
.outerradius(250);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return 1
});
var ga = arcgroup.selectall(".arcstyle")
.data(pie(tags))
.enter().append("g")
.attr("class", "arc");
ga.append("path")
.attr("d", arcshape)
.style("fill", function(d) {
return d.data.tcolor
});
ga.append("text")
.attr("transform", function(d) {
return "translate(" + arcshape.centroid(d) + ")"
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.style('fill', 'white')
.text(function(d) {
return d.data.tag
});
<script src="https://d3js.org/d3.v3.min.js"></script>
Source: stackoverflow.com
Related Query
- Can I make a donut chart without external file for data?
- how to create labels for data in donut chart using d3.js
- How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js?
- Accessing multi-dimensional data without a for loop to make arc data along radial
- Using External json file for creating bubble chart using d3js
- Loading internal JSON data rather than from an external resource / file for a sunburst in d3
- Converting separate data frames to a JSON file for a tidy tree chart
- Getting a csv file from local directory to make a Chart without using server
- Dual Y axis line chart in d3.js without external data
- Getting data from json file for D3 bubble chart
- d3.js Chart breaks after moving json data to external file
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- How can I get "call" to execute for each data element in D3?
- Special donut chart with different rings/arcs for positive and negative values
- Where can I get the .geojson file for India and not separate files for each state/territory or any other distinction?
- How to make curved lines to straight lines for Hierarchy Chart using d3.js
- Maximum Data File Size for D3.js
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- D3: How can I change data in an existing bar chart
- How can we create an onclick event for a d3 data map?
- How to make a C3 donut chart to a semi circle or a half donut chart in typescript?
- In D3, how can I create multiple elements for each data element based on value in data?
- dimple.js How can I change the labels of a chart axis without changing the data?
- d3 show labels only for ticks with data in a bar chart
- how to display bottom data for row chart using dc.js
- Javascript manipulate data into array of object for d3 stacked chart
- C3js - combination chart with data labels only for line
- How to word wrap the legend text for a donut chart
- hack for d3 pie chart with 'zero' data
- d3 donut chart arc retrieves wrong data
More Query from same tag
- Logarithmic charts in crossfilter
- JS based influxdb graph editors like Grafana, Influga, are there reusable libraries?
- Resize viewBox when dragging a node
- D3JS Pack Layout Dynamic Update
- d3 waterfall graph rotate in x axis values 180 to -90 degree
- d3 equivalent of jQuery find("*")
- how to load geometryCollection of geojson file in d3
- click to zoom and scale bar in d3.js map
- D3 v4 change opacity for kontext related nodes
- JS-generated SVG doesn't fill space
- How do I color plot.ly js legend and why is it black?
- Elliptical arc arrow edge d3 forced layout
- how to change x axis in D3?
- How do I adjust zoom size for a point in D3?
- When selecting an option from the dropdown selection box created via d3.js the value sent to the button becomes undefined
- How to create a gradient that goes across different rectangles in D3JS?
- Only one SVG component rendered when calling a method twice
- Error when providing svg v1 path parameter d
- Javascript parses integer as NaN?
- How to use D3 clip path on image within a function
- D3js Tooltip on country MAP is not coming
- CSV/TSV comment lines d3
- Uncaught TypeError: canvas.selectAll(...).data(...).enter is not a function in d3
- How do I mismatch D3's closing tag?
- D3.js- Binding an object's name with its value
- issue with dc.ChoroplethChart
- d3: unable to send mouse events to another svg element (event.target.__data__ is null)
- Why doesn't this D3 chart redraw when I repeatedly call it's original draw function?
- use d3js to update text in div tag
- How do I make the height of a horizontal bar chart flexible in order to be resized when new data has been added in?