Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To update your data you will just need to select the svg elements again and rebind the data. In your example you are already selecting the <code>#barchart</code>, now you just need to rebind the data. And you can do that in the same way you did it when you first created the svg Elements. So something like this should do the trick:</p> <pre><code>var updatebar = svg.selectAll("#barchart"); .data(newdata) .transition() .duration(500) ... (etc.) </code></pre> <p>Here you can find a more detailed explaination: <a href="http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_updating_data" rel="noreferrer">http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_updating_data</a></p> <p>Update:</p> <p>Ok, unfortunately I cannot use Fiddle so I just post my working code here. As far as I could see you have a problem with your selectAll, because there is no element called <code>.effort</code>. Here is the updated code for your redraw-function:</p> <pre><code>function redraw() { var effort = []; var obj = { pfte: "20", efte: "50", qName: "Q1" }; var obj2 = { pfte: "10", efte: "13", qName: "Q2" }; effort[0] = obj; effort[1] = obj2; var newDataSet = new Object(); newDataSet.effort = effort; color.domain(d3.keys(newDataSet.effort[0]).filter(function (key) { return key !== "qName"; })); effortDataSet = newDataSet.effort; effortDataSet.forEach(function (d) { var y0 = 0; d.effortHr = color.domain().map(function (name) { return { name: name, y0: y0, y1: y0 += +d[name] }; }); d.total = d.effortHr[d.effortHr.length - 1].y1; }); state = svg.selectAll(".g") .data(effortDataSet) .attr("class", "g") .attr("transform", function (d) { return "translate(" + x(d.qName) + ",0)"; }); state = state.selectAll("rect") .data(function (d) { return d.effortHr; }) .attr("width", x.rangeBand()) .attr("y", function (d) { return y(d.y1); }) .attr("height", function (d) { //console.log(y(d.y0) - y(d.y1)); return y(d.y0) - y(d.y1); }) .style("fill", function (d) { return color(d.name); }); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POHow to update data in stack bar chart in D3
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USnothing9
    1. USnothing9
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to update data in stack bar chart in D3
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI have created stacked bar chart like this [Stacked chart][1] [1]: https://gist.github.com/mbostock/3886208 But i want to update the data in this chart. My data set changes with axis name and value both. But i am not able to just achieve the simple data change. Any help in this regard would be highly appreciated.
      singulars
      1. PO
      1. USgunjan
    2. COOk, I think the problem is as follows: You first bind a dataset to your elements. That means that your data is **copied** to your elements. Next you use data to get sub-data from your original data (d.effortHr). Inbetween you changed the dataset but the data which is bound to your elements is still the same because it was copied. Try to really rebind the dataset after you changed it again with .data(effortDataSet)
      singulars
      1. PO
      1. USnothing9
    3. COI am able to redraw the new value but Old bars are not getting removed, its just overlapping on old value. var block = state.selectAll("rect") .data(function(d) { return d.effortHr; }); block.enter().append("rect") .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.y1); }) .attr("height", function(d) { return y(d.y0) - y(d.y1); }) .style("fill", function(d) { return color(d.name); }); //block.exit().attr("transform", function(d) {console.log(d); return "translate(" + x(d.qName) + ",0)"; }).remove(); block.exit().remove();
      singulars
      1. PO
      1. USgunjan
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload