Accessing the correct array of objects column

Question

I am having d3 read a TSV file. Then I want a particular column of that file to be graphed on a line.

I've tried a lot of variations all with undefined errors.

Below is what I am trying to do in concept:

d3.tsv("file.txt").then( foo => { 

var svg = d3.select("graph").append("svg").attr(etc... )

svg.selectAll(".dot")

    ----->     .data(foo[all indexes]['nameofcolumn'])

            .enter().append("circle") 
            .attr("class", "dot") 
            .attr("cx", function(d, i) { return xScale(i) })
            .attr("cy", function(d) { return yScale(d.y) })
            .attr("r", 5)
            ...etc...

Even if I hardcode foo[1]['columnname'] (which console.log confirms is a number) my graph just falls through. No images, no error.

Data column in this sence is all 'x' values in the array of objects: [{x:1 y:2 z:3},{x:4 y:5 z:6},{x:7 y:8 z:9}, etc] would be [1,4,7]. — HAZRD
– HAZRD, Commented Aug 14, 2019 at 16:16
.data() expects an array of objects. What is the result of console.logging out foo[1]['nameofcolumn']? — lemming
– lemming, Commented Aug 14, 2019 at 16:17
console.log for foo[1] gives: {Date Time = 12:00, T1 = 0.798, T2 = 1.129, etc } foo[1]['T1'] gives: 0.798 — HAZRD
– HAZRD, Commented Aug 14, 2019 at 16:19

lemming · Accepted Answer · 2019-08-14 16:35:42Z

I think you are getting confused by the argument that .data() takes. You seem to be passing it a single property from a single data point. But, in fact, you should pass it your entire dataset. So in your example, this should just be foo:

// foo: [{ "Date Time": 12:00, T1: 1, T2: 2 }, { "Date Time": 13:00, T1: 3, T2: 3.5 }, ...]

d3.selectAll('.dot')
  .data(foo)
  .enter()
    .append('circle')
    ...

This code says:

select all of the elements with the dot class (there won't have been any created yet, but that's fine).
pass in an array representing my entire dataset, called foo.
if there is any datapoint in the dataset for which there hasn't been a dom element created yet (all of them at the moment because this is the start), then append a circle. So on enter() d3 will loop through the foo array that you provided to data() and append a circle for each data-point.

The second issue is that you look to be setting the cy attribute incorrectly, because you are passing in d.y to the yScale() function. Instead you need to pass in the correct property from your data.

So in your example, you have T1 and T2 properties in each of your data-points. I'm not sure which is the one you wish to represent on your y axis, but let say it is T1, then the code should read:

...
.attr('cy', function(d) { return yScale(d.T1); })
...

Collectives™ on Stack Overflow

Accessing the correct array of objects column

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related