CODEWITHSUNDEEP
javascriptd3.jsattr
Kurenai
Kurenai

Reputation: 21

What is the meaning of attr("d", path)?

I tried to find about 'd' in Official site... Maybe,, it's not related to D3.... related more to javascript, css, svg, html....

What is the meaning of attr("d", path) ?

.....................
var areas = group.append("path")
    .attr("d", path)
    .attr("class", "area")
    .attr("fill", "steelblue");

Is it different with d in d3?

.style({
    'font-size':'18px',
    'padding':'6px',
    'margin':'4px',
    'list-style':'none',
    'background':function(d){
      return d.background;
    },
    'color':function(d){
      return d.color;
    },
    'width':function(d){
      return d.width+'%';
    }
  });

Upvotes: 1

Views: 5413

Answers (1)

Aakash More
Aakash More

Reputation: 168

The d attribute of a svg element defines the shape of the svg in SVG Path Mini-Language. The reference for this language can be found on the following links.

SVG Path Example

The shape of an SVG Path element is defined by one attribute: d.

This attribute, d, contains a series of commands and parameters in the SVG Path Mini-Language.

These commands and parameters are a sequential set of instructions for how to "move the pen over the paper".

Ref:Dashing D3js & SVG Paths

and MDN:

The d attribute defines a path to be drawn.

A path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters. The commands are detailed below.

Ref: d - SVG: Scalable Vector Graphics | MDN Path Commands: SVG Path Commands | MDN

Upvotes: 4

Related Questions