CODEWITHSUNDEEP
javascriptd3.jssvg
Michael W. Czechowski
Michael W. Czechowski

Reputation: 3457

How to call d3.svg.line() independently?

lineFunction corresponds in this example with d3.svg.line(). Later, however, lineFunction is filled as a function with a parameter lineData, namely a list of points with x and y coordinates. How can I bypass lineFunction and include the dataset directly in d3.svg.line()?

My approach would be to call directly on d3.svg.line(lineData):

//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", d3.svg.line(lineData)
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate('linear'))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

But this does not make any sense, as long as this is no function, that accepts parameters. I've also looked into the D3 code base and found that the line function does accept an input:

export default function() {
  var x = pointX,
  // ...
  function line(data) {
    // ...
  }
  // ...
  return line;
}

Here is a running example by Dimitar Danailov:

var width = 400;
var height = 400;

var svg = d3.select('body').append('svg');
svg.attr('width', width);
svg.attr('height', height);

//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate('linear');

//The data for our line
var lineData = [ 
  { "x": 1,   "y": 5},  
  { "x": 20,  "y": 20},
  { "x": 40,  "y": 10}, 
  { "x": 60,  "y": 40},
  { "x": 80,  "y": 5},  
  { "x": 100, "y": 60}
];
  
//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", lineFunction(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");
svg {
  font-family: "Helvetica Neue", Helvetica;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}
<script src="//d3js.org/d3.v3.min.js"></script>

Source: https://bl.ocks.org/dimitardanailov/6f0a451d4457b9fa7bf6e0dddcd0f468

Further examples: https://www.dashingd3js.com/svg-paths-and-d3js

Upvotes: 4

Views: 5702

Answers (1)

Steve
Steve

Reputation: 10886

What you can do is call d3.svg.line() after you've configured it, like:

var lineGraph = svg.append("path")
  .attr("d", d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate('linear')(lineData))

So the revised snippet looks like this: 

var width = 400;
var height = 400;

var svg = d3.select('body').append('svg');
svg.attr('width', width);
svg.attr('height', height);


//The data for our line
var lineData = [ 
  { "x": 1,   "y": 5},  
  { "x": 20,  "y": 20},
  { "x": 40,  "y": 10}, 
  { "x": 60,  "y": 40},
  { "x": 80,  "y": 5},  
  { "x": 100, "y": 60}
];
  
//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate('linear')(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");
svg {
  font-family: "Helvetica Neue", Helvetica;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}
<script src="//d3js.org/d3.v3.min.js"></script>

Edit: Note that the question and answer uses d3.svg.line() which is from d3 v3. For higher versions you can use d3.line(), and omit the interpolate, like that mentioned below by @uzay95.

Upvotes: 2

Related Questions