The accessor functions are implemented using the technique we introduced in Chapter 1, Getting Started with D3.js, effectively combining both getter and setter functions in one function, which behaves as a getter when no argument is given and a setter when an argument is present (line 1C). Additionally, both lineChart function and its accessors, return a chart instance thus allowing function chaining. Finally, the chart object also offers an addSeries function which simply pushes a data array (series) into its internal data storage array (_data), see line 1D.

Chart body frame rendering: After covering the basic chart object and its attributes, the next aspect of this reusable chart implementation is the chart body svg:g element rendering and its clip path generation.

_chart.render = function () { // <-2A
  if (!_svg) {
    _svg = d3.select("body").append("svg") // <-2B
      .attr("height", _height)
      .attr("width", _width);

    renderAxes(_svg);

    defineBodyClip(_svg);
  }

  renderBody(_svg);
};
...
function defineBodyClip(svg) { // <-2C
  var padding = 5;

  svg.append("defs")
    .append("clipPath")
    .attr("id", "body-clip")
    .append("rect")
    .attr("x", 0 - padding)
    .attr("y", 0)
    .attr("width", quadrantWidth() + 2 * padding)
    .attr("height", quadrantHeight());
  }

function renderBody(svg) { // <-2D
  if (!_bodyG)
    _bodyG = svg.append("g")
      .attr("class", "body")
      .attr("transform", "translate(" 
        + xStart() + "," 
        + yEnd() + ")") // <-2E
      .attr("clip-path", "url(#body-clip)");        

  renderLines();

  renderDots();
}
...

The render function defined on line 2A is responsible for creating the svg:svg element and setting its width and height (line 2B). After that, it creates an svg:clipPath element that covers the entire chart body area. The svg:clipPath element is used to restrict the region where paint can be applied. In our case we use it to restrict where the line and dots can be painted (only within the chart body area). This code generates the following SVG element structure that defines the chart body:

The renderBody function defined on line 2D generates the svg:g element which wraps all the chart body content with a translation set according to the chart margin convention we have discussed in the previous section (line 2E).

Render axes: Axes are rendered in the function renderAxes (line 3A).

function renderAxes(svg) { // <-3A
  var axesG = svg.append("g")
    .attr("class", "axes");

  renderXAxis(axesG);

  renderYAxis(axesG);
}

As discussed in the previous chapter, both x and y axes are rendered inside the chart margin area. We are not going into details about axes rendering since we have discussed this topic in much detail in Chapter 5, Playing with Axes.

Render data series: Everything we discussed so far in this recipe is not unique to this chart type alone but rather it is a shared framework among other Cartesian coordinates based chart types. Finally, now we will discuss how the line segments and dots are created for multiple data series. Let's take a look at the following code fragments that are responsible for data series rendering.

function renderLines() { 
  _line = d3.svg.line() // <-4A
    .x(function (d) { return _x(d.x); })
    .y(function (d) { return _y(d.y); });
    
  _bodyG.selectAll("path.line")
    .data(_data)
    .enter() // <-4B
    .append("path")                
    .style("stroke", function (d, i) { 
      return _colors(i); // <-4C
    })
    .attr("class", "line");

  _bodyG.selectAll("path.line")
    .data(_data)
    .transition() // <-4D
    .attr("d", function (d) { return _line(d); });
}

function renderDots() {
  _data.forEach(function (list, i) {
    _bodyG.selectAll("circle._" + i) // <-4E
      .data(list)
      .enter()
      .append("circle")
      .attr("class", "dot _" + i);

    _bodyG.selectAll("circle._" + i)
      .data(list)                    
      .style("stroke", function (d, i) { 
        return _colors(i); // <-4F
      })
      .transition() // <-4G
      .attr("cx", function (d) { return _x(d.x); })
      .attr("cy", function (d) { return _y(d.y); })
      .attr("r", 4.5);
    });
}

The line segments and dots are generated using techniques we introduced in Chapter 7, Getting into Shape. The d3.svg.line generator was created on line 4A to create svg:path that maps the data series. The Enter-and-Update pattern is used to create the data line (line 4B). Line 4C sets a different color for each data line based on its index. Lastly, line 4E sets the transition in the update mode to move the data line smoothly on each update. The renderDots function performs a similar rendering logic that generates a set of svg:circle elements representing each data point (line 4E), coordinating its color based on the data series index (line 4F), and finally also initiates a transition on line 4G, so the dots can move with the line whenever the data is updated.

As illustrated by this recipe, creating a reusable chart component involves actually quite a bit of work. However, more than two-thirds of the code is required in creating peripheral graphical elements and accessors methods. Therefore in a real-world project you can extract this logic and reuse a large part of this implementation for other charts; though we did not do this in our recipes in order to reduce the complexity, so you can quickly grasp all aspects of chart rendering. Due to limited scope in this book, in later recipes we will omit all peripheral rendering logic while only focusing on the core logic related to each chart type.