Question

在我的第一个d3 js图表中尝试刷子功能，并让刷子按预期工作。我遇到的唯一问题是图表线溢出x轴的边界。当选择整个时期时，线条保持其边界。我做错了什么但不能真正看到什么。有人有指针吗？

下面的代码（选中）：

        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);
}

Answer 1

好的，我想我找到了一个看起来很不错的解决方案。这是我错误的剪辑路径部分。当我添加此代码时，它看起来更好：

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)");;

我仍然不太明白这一点（代码感觉如此）。但它确实有效。

D3 js - 当使用画笔线超出图表x轴时

1 个答案: