cannot update the data in active charts

[square]

cannot update the data in active charts

[PeterMJ]

I just thought I'd add, that I'm using the latest firefox on Windows XP, and in the web developer console I'm getting the error:

[16:42:11.525] uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://localhost/SNV/js/libs/d3.v2.js Line: 1758"]

Peter

Ps. sorry about the badly formated issue port

[PeterMJ]

Additionally, if I reduce the number of data elements, then the number of charts reduce, but the data does not change. for example if I remove the first data sequence from the data attribute I then see three data graphs, but it is the last element that is removed and all other sequences continue unchanged.

[mbostock]

A few things:

• Please use stack overflow to ask support questions. Issues should only be filed if you are reporting a bug in the code or a feature request.
• When asking questions, it's much easier to answer them if you link to a live example rather than embedding your code directly in the question. Use JsFiddle, JS Bin, Gist & bl.ocks as needed.
• To fix the formatting, surround the code with ``` to ensure correct formatting, as described in the GitHub-flavored markdown documentation.

I have filed #8 as a feature request to add an example to the Cubism distribution. There's another example bundled with Cube, in the meantime.

One reason that your code isn't working is because you aren't using D3's data-join correctly. I recommend reading Thinking with Joins and Three Little Circles. Specifically: since you have four charts initially and four charts after you press the button and you didn't specify a key function to your data join, the exit selection is empty so the removal has no effect.

You need to specify a key function if you change the order of elements; you might be able to use the identity function as the key function in this case (function(d) { return d; }), since that would use the metric expression as the key. Alternatively, if you just want to remove all the charts, remove them without using a data-join (d3.selectAll(".horizon").remove()). You can also add a single chart without a data-join (d3.select("body").append("div").attr("class", "horizon")… etc.).

Another reason that your code isn't working is because you need to use horizon.remove to unregister the charts from the context, in addition to removing them from the DOM. Otherwise, the charts will continue to fetch data and waste resources. The example from the documentation:

d3.selectAll(".horizon")
    .call(horizon.remove)
    .remove();

If you need more help, please followup on Stack Overflow. Thank you!

[PeterMJ]

Mike,

Thank you, I thought I had read the data-join tutorial completely, but yes I missed the 'key' function aspect in the final example.

I'm enjoying the different style of applying visualisation techniques that you have employed, I'm also incredibly new to JS development, so those open example paste-bin like sites will be very helpful, thanks again.

Thank you,

Peter

Dr Peter Myerscough-Jackopson  -  Principal Engineer

Tel: [phone] Fax: [phone]
Web: http://www.macltd.com/  Email: [email protected]
MULTIPLE ACCESS COMMUNICATIONS LIMITED is a company registered in
England at Delta House, The University of Southampton Science Park,
Southampton, SO16 7NS, United Kingdom with Company Number 1979185 and
VAT Number GB 411942866

-----Original Message-----
From: Mike Bostock [mailto:[email protected]]
Sent: 08 May 2012 20:44
To: Peter Myerscough-Jackopson
Subject: Re: [cubism] cannot update the data in active charts (#7)

A few things:

• Please use stack overflow to ask support questions. Issues should only be filed if you are reporting a bug in the code or a feature request.
• When asking questions, it's much easier to answer them if you link to a live example rather than embedding your code directly in the question. Use JsFiddle, JS Bin, Gist & bl.ocks as needed.
• To fix the formatting, surround the code with ``` to ensure correct formatting, as described in the GitHub-flavored markdown documentation.

I have filed #8 as a feature request to add an example to the Cubism distribution. There's another example bundled with Cube, in the meantime.

One reason that your code isn't working is because you aren't using D3's data-join correctly. I recommend reading Thinking with Joins and Three Little Circles. Specifically: since you have four charts initially and four charts after you press the button and you didn't specify a key function to your data join, the exit selection is empty so the removal has no effect. You need to specify a key function if you change the order of elements; you might be able to use the identity function as the key function in this case (function(d) { return d; }), since that would use the metric expression as the key. Alternatively, if you just want to remove all the charts, remove them without using a data-join (d3.selectAll(".horizon").remove()). You can also add a single chart without a data-join (d3.select("body").append("div").attr("class", "horizon")… etc.).

Another reason that your code isn't working is because you need to use horizon.remove to unregister the charts from the context, in addition to removing them from the DOM. Otherwise, the charts will continue to fetch data and waste resources. The example from the documentation:

d3.selectAll(".horizon")
    .call(horizon.remove)
    .remove();

If you need more help, please followup on Stack Overflow. Thank you!

---

Reply to this email directly or view it on GitHub:
#7 (comment)