Use a Pre-Defined Scale to Place Elements

Use a Pre-Defined Scale to Place Elements
0

#1

I can’t see what I’m doing wrong can someone help me please.

<body>
  <script>
    const dataset = [
                  [ 34,     78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,   411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,    333 ],
                  [ 78,    320 ],
                  [ 21,   123 ]
                ];
    
    const w = 500;
    const h = 500;
    const padding = 60;
    
    const xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[0])])
                     .range([padding, w - padding]);
    
    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[1])])
                     .range([h - padding, padding]);
    
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       // Add your code below this line
       .attr('cx', (d, i) => xScale(d[0]))
       .attr('cy', (d, i) => yScale(d[1]))
       .attr('r',5)
       
       
       // Add your code above this line
       
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) =>  (d[0] + ", "
 + d[1]))
       // Add your code below this line
       .attr('x',(d, i) => xScale(d[0])+10)
       .attr('y',(d, i) => yScale(d[1]))
       
       
       // Add your code above this line
  </script>
</body>

Here is the output
// running test
The first label should have an x value of approximately 100 and a y value of approximately 368 after applying the scales.
The second label should have an x value of approximately 168 and a y value of approximately 181 after applying the scales.
The fifth label should have an x value of approximately 449 and a y value of approximately 237 after applying the scales.
The sixth label should have an x value of approximately 280 and a y value of approximately 306 after applying the scales.
The seventh label should have an x value of approximately 370 and a y value of approximately 351 after applying the scales.
The eighth label should have an x value of approximately 270 and a y value of approximately 132 after applying the scales.
The ninth label should have an x value of approximately 140 and a y value of approximately 144 after applying the scales.
The tenth label should have an x value of approximately 88 and a y value of approximately 326 after applying the scales.
// tests completed


#2

You gotta watch this line and check where parantheses should close.

.attr('x',(d, i) => xScale(d[0])+10)


#3

Thanks moved the +10 now it works


#4

I can’t understand where you put +10 .Can you tell me?


#5

You want to xScale added values instead of each data.

=> xScale(d[0]+10))