CODEWITHSUNDEEP
javascriptd3.js
rettoryh13
rettoryh13

Reputation: 135

How make linear interpolation?

I use D3 library version 5.7.0. Please help me make simple linear interpolation between points.

My try here: JSFIDDLE

As you are can see, interpolation line in my example has a different thickness. It problem. I need draw interpolation line with constant thickness. For example: https://bl.ocks.org/gordlea/raw/27370d1eea8464b04538e6d8ced39e89/

Code:

    var line = d3.line()
      .x((d, i) => { return xScale(d.dateUnix); })
      .y((d) => { return yScale(d.price); })
      .curve(d3.curveBasis);      

    svg.append("path")
      .datum(data)
      .attr("d", line);


  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', d => xScale(d.dateUnix))
    .attr('y', d => yScale(d.price))
    .attr('width', d => 4)
    .attr('height', d => 4)
    .attr('fill', '#000');

Upvotes: 2

Views: 671

Answers (1)

Ahmad
Ahmad

Reputation: 12737

By default, SVG paths have no stroke and a black fill. You must disable fill, and set stroke to some color and some width.

You can do that either from Javascript or from CSS.

For CSS just add the following in your style sheet:

  path
  {
    fill:none;
    stroke: black;      /* or whatever color you like */
    stroke-width: 4px;  /* or any width you like */
  }

From JS change your code to:

svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("fill","none")
  .attr("stroke","black")       // or any color you like
  .attr("stroke-width","5px");  // or any width you like

Upvotes: 2

Related Questions