D3 Datum Update Boxplot

问题

I am trying to update 3 svgs (BoxPlots). In the following code the var svg contains an array of the 3 svgs and the _data_ has been updated to the correct number of records. I follow the BoxPlot Example , but cannot see what I am doing wrong.

$('#Records li a ').click(function() {

    var id =  event.target.id;
    var idparts = id.split("_");
    var numrec =  idparts[1];

    d3.json("./php/connection2.php?numrecs="+numrec, function (error, csv) {
        d3.json("./php/connection2.php?numrecs="+numrec, function (error, csv) {
        var chart = d3.box()
            .whiskers(iqr(1.5))
            .width(width)
            .height(height);
        var numericArray = createdata(csv);
        chart.domain([min, max]);
        var svg = d3.selectAll("svg")
        svg.data(numericArray).call(chart.duration(1000));


    });

    $('#RecordsDropdown').removeClass("open");
    return false;

}); });

Ive also tried: .....

thisdata=numericArray;
            var svg = d3.selectAll("svg");
            svg.data(thisdata);
            svg.call(chart.duration(1000));
            //updatedata(svg);

I am getting this error when it tries to create new outliers

Uncaught Error: NotFoundError: DOM Exception 8

回答1:

I found that if you remove the insert("text") at line ~158 in box.js:

//change this:
//outlier.enter().insert("circle", "text")
// to this:
outlier.enter().insert("circle")

That will prevent the

Uncaught Error: NotFoundError: DOM Exception 8

The only other thing that I had to change was to make sure that it appended the new outlier in the g of my box plot when I called it to animate it. Otherwise they'll be off a bit.

var svg = d3.selectAll(".box" + Attr + sample + " g")
    .data(data);
    svg.call(chart.duration(1000));

I don't know what the "text" was there for.

来源：https://stackoverflow.com/questions/17676779/d3-datum-update-boxplot

标签

svg

d3.js