Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

d3.voronoi mutates data #26

Closed
DDDgfx opened this issue Jan 5, 2018 · 3 comments
Closed

d3.voronoi mutates data #26

DDDgfx opened this issue Jan 5, 2018 · 3 comments

Comments

@DDDgfx
Copy link

DDDgfx commented Jan 5, 2018

Like some d3 layouts and functions. Voronoi seems to mutate data, but unlike some others (force for example adds properties but does not move them), all properties are dropped into a data node, and an array of 4 points is left at top level. As a result, it seems, I am unable to access the data properties to use a key function when joining when attempting to extend this example to apply animations with the general update pattern.
https://bl.ocks.org/mbostock/6526445e2b44303eebf21da3b6627320

Likewise, I am unable to to generate voronoi diagram without changing the data used elsewhere in my project. Which I think would be helpful as the voronoi is only being used in one state of my data display. Would it be preferable if it did not mutate, or am I missing something?

@mbostock
Copy link
Member

mbostock commented Jan 5, 2018

d3.voronoi does not mutate the input data. Internally, it wraps each element in the input data array in a new object called a site (a two-element array [x, y]). The site also stores a reference to the original data element as the data property.

function voronoi(data) {
return new Diagram(data.map(function(d, i) {
var s = [Math.round(x(d, i, data) / epsilon) * epsilon, Math.round(y(d, i, data) / epsilon) * epsilon];
s.index = i;
s.data = d;
return s;
}), extent);
}

Some of the voronoi methods expose the site objects. Others return the original elements from the input data array, such as voronoi.triangles.

@mbostock mbostock closed this as completed Jan 5, 2018
@DDDgfx
Copy link
Author

DDDgfx commented Jan 5, 2018

For some reason, I was seeing these site arrays, and the data object when I logged my original data. Also was experiencing this:

    var cells = dataLr.selectAll(".data-bub").data(d3.voronoi()
            .extent([
                [-100, -100],
                [svgWidth, svgHeight]
            ])
            .x(function(d) {
                //console.log(d);
                return d.x;
            })
            .y(function(d) {
                return d.y;
            })
            .polygons(fData),
            function(d) {
                console.log(d); //my properties are logged
                console(d.data.id); //the property itself returns undefined
            })
        .enter().append("g");

But now I'm not seeing that, and I have decided not to try to key the diagram. Thank you for explainig.

@DDDgfx
Copy link
Author

DDDgfx commented Jan 5, 2018

Overall, trying to learn what d3 modules do to my data by logging it to the console seems to be a very bad idea as the console is logging the end state no matter where in the code the command is.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

2 participants