score:0
There are a couple of problems with your code. First, the selector
var arc_group = d3.select('#'+pieId+' .sliceholder');
doesn't work because the g
element with class sliceholder
is a subelement of the SVG. You need
var arc_group = d3.select('#'+pieId+' > .sliceholder');
Second, you can't pass in the raw data when updating, you need to process it with a pie layout first. That is,
paths = arc_group.selectAll("path").data(data[0].legends);
won't work, you need
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
paths = arc_group.selectAll("path").data(pie(data[0].legends));
Third, you've missed some initialisation when copying the arcTween
code. You need to set the initial values for ._current
:
svg.selectAll(".arc")
.data(function(d) { return pie(d.legends); })
.enter().append("path")
...
.each(function(d) { this._current = d; });
Working jsfiddle here.
Source: stackoverflow.com
Related Query
- d3.js can not update the chart - using json data
- Understanding D3 data join using the new syntax - Array data is update but DOM not
- filter the json data and draw the nvd3 chart using filtered data
- Ajax retrieve Json string but can not loop the success data as object
- populating the JSON data from spring mvc to d3 chart using request body
- Can d3.js draw two scatterplots on the same graph using data from the same source?
- How to update elements of an HTML that the elements are created using data from a CSV file?
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- how can i group JSON data into the weeks according to calender?
- Update donut chart using the c3 library (JQuery)
- Stacked Bar Chart using d3.js stack layout; the bar sections not always in correct place
- how to update data form file json using d3.js (zoomable circle pack)
- NVD3 Line Chart doesn't display when data passed using ajax - data.map is not a function
- Chart is not showing the data array of objects
- D3 How to update the chart after selection from drop down menu with new data
- I want to update the data on this d3.js bar chart by clicking a button. (onclick)
- In d3.js, while importing csv files using a row conversion, how can I "slice" the data to only include a range of rows?
- d3 chart update automatically when data change by using vue
- D3.js line chart using the wrong keys when using general update pattern
- Drawing a line using d3 is not visible when all data items are the same
- How to change json file in d3.js and update chart using select options
- Trying To Plot Json Data On World Map Using leafletjs But Data Displayed is Not Accurate
- Angular NVD3 Multibar Chart with dual y-axis to showup only line using json data
- Time in x-axis and data for the y-axis for line chart in d3.js doesn't match/show with what (data) is on JSON
- How to show the unhighlighted/ not selected data points on scatter plots when using brush/group in dc.js? And is multiple brushes possible in dc.js
- Update chart with new data not working
- d3 bar chart labels not getting updated on updating the chart with the new data
- Using different data in the same donut chart
- JavaScript D3 bar chart data will not update when new source is selected from drop down filter
- How to extract json data of the selected nodes using d3.js?
More Query from same tag
- Identifying columns by position rather than name
- Issue when trying to retrieve individual values from a csv file
- Moving fixed nodes in D3
- how to add points to the end of the path
- Custom colors in C3.js timeseries chart
- Visualising a custom map with QGIS and D3.js is harmed by the projection
- D3 visualization from Hbase using REST api/json
- Points on d3 map not on the same scale or part of the svg
- D3.js rotate shape without rotating text inside
- d3 tree node position
- Update data on line chart not working
- Dragging a path using D3
- d3.join() enter called instead of update?
- d3.js custom curve step round
- D3 pie chart labels and value inside
- How to create satellite nodes to a main node in D3.js force layout graphs
- Display the Values inside the bar in nvd3 (d3) discreteBarChart in angular
- d3 chart + jQuery DataTables: trouble reading nested array
- d3js - how to set albers projection properly?
- How to set the browser window size according to D3JS graph?
- Want to use chart which gives you difference of something in charting library javascript
- Is it possible to debounce d3.zoom callback?
- PowerBI-visuals-tools d3 import
- What is difference between string[] & [string,string,string]
- D3 Bubble Example: What does bubble.nodes() do?
- How to specify 3 different custom colors for 3 nodes in D3 force layout on load
- How do I use mouseover for an element hidden behind an invisible element?
- My D3js treemap chart is ou of my div when i zoom on it
- d3js angular directive for area chart using d3.mouse event for tooltip
- D3.js: How to add distribution line(s) to histograms in version 4