CODEWITHSUNDEEP
javascriptd3.jslinechartbrush
ErrantBard
ErrantBard

Reputation: 1501

D3 js - when using brush line grows beyond chart x-axis

Trying out brush functionality in my first d3 js chart and have gotten the brush to work as intended. Only problem I have atm is that the chart lines spill over the bounds of the x-axis. When the whole period is selected the lines keep their bounds. I'm doing something wrong but can't really see what. Anybody got a pointer?

Code(selected) down below:

        var margin = {top: 40, right: 185, bottom: 100, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
        var margin2 = {top: 440, right: 185, bottom: 20, left: 40},
            height2 = 500 - margin2.top - margin2.bottom;

        var x=d3.time.scale().range([0, width]),
            x2 = d3.time.scale().range([0, width]);
        var y=d3.scale.linear().range([height,0]),
            y2= d3.scale.linear().range([height2,0]);

         var xAxis = d3.svg.axis().scale(x)
                            .orient("bottom")
                            .ticks(5);
         var xAxis2 = d3.svg.axis().scale(x2)
                            .orient("bottom")
                            .ticks(5);
         var yAxis = d3.svg.axis().scale(y)
                            .orient("left")
                            .ticks(5)
                            .tickFormat(formatPercent);

          var brush = d3.svg.brush()
                      .x(x2)
                      .on("brush", brushed);

function brushed() {

x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select("#mainline").attr("d", function (d) {return valueLine(dataFilter); });
focus.select("#subline").attr("d", function (d) {return valueLine(dataAHSantal); });
focus.select(".x.axis").call(xAxis);
}

Upvotes: 1

Views: 1079

Answers (1)

ErrantBard
ErrantBard

Reputation: 1501

Ok, think I found a solution that looks pretty ok. It was the clip-path parts I had gotten wrong. When I added this code it looks better:

var clip = focus.append("defs").append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("id", "clip-rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", width)
    .attr("height", height);

focus.selectAll("path").data(nested).enter()
    .append("path")
    .attr("class", "line")
    .attr("id", "mainline")
    .attr("d", function (d) {return valueLine(dataFilter); })
    .attr("clip-path","url(#clip)");

focus.append("path")
    .data(dataAHSantal)
    .attr("class", "pathahs")
    .attr("id", "subline")
    .attr("d", function (d) {return valueLine(dataAHSantal); })
    .attr("clip-path","url(#clip)");;

I still don't really understand this (and the code feels so-so). But it works.

Upvotes: 2

Related Questions