CODEWITHSUNDEEP
javascriptd3.js
nope
nope

Reputation: 771

Drawing line outside of axis in d3js line chart

I have been trying to create a dynamic line chart in d3.js, using the tutorial here. I have almost got it working, but there is a slight problem. When I choose a date interval using the viewport and redraw the chart, it draws the line outside of the axis too. See the left of the graphic below.

enter image description here

Normally, I draw the line as below:

var valueline = d3.svg.line()
                .x(function (d) {
                    return xScale(d.timestamp);
                })
                .y(function (d) {
                    return yScale(d.value);
                });

plotChart.append("path")
                .attr("class", "line")
                .attr("id", "lineGraphId")
                .attr("d", valueline(data));

And my redraw chart function is as below:

function redrawChart() {
            plotChart.select("#lineGraphId").remove();
            plotChart.append("path")
                    .attr("class", "line")
                    .attr("id", "lineGraphId")
                    .attr("d", valueline(data));
            plotChart.select('.x.axis').call(xAxis);
        }

I could not find a solution for drawing outside of the axis. I could not host my code in jsfiddle because I needed to load a csv data, but you can see all source code here.

Upvotes: 0

Views: 930

Answers (1)

nope
nope

Reputation: 771

Apparently, I needed to add this line of code to redrawChart function:

.attr('clip-path', 'url(#plotAreaClip)')

Upvotes: 0

Related Questions