javascript - 折线图路径中不必要的间隙

Question

我正在尝试使用 d3 js 创建具有双色描边的线条。折线图的路径之间有一些不需要的间距。

我尝试执行此代码:http://jsfiddle.net/SampathPerOxide/bzu63anf/ 我得到了我需要的双色笔划，但路径用空格分隔，这使得折线图断开连接。 这是我的完整代码:http://jsfiddle.net/SampathPerOxide/ne58otvm/3/

            var data =    [
            {"date":"2018-1","value":40.13,"status":1},
            {"date":"2018-2","value":45.88,"status":1},
            {"date":"2018-3","value":50.89,"status":1},
            {"date":"2018-4","value":55.87,"status":1},
            {"date":"2018-5","value":88.54,"status":1},
            {"date":"2018-6","value":74.41,"status":1},
            {"date":"2018-7","value":98.56,"status":1},
            {"date":"2018-8","value":81.05,"status":1},
            {"date":"2018-9","value":58.13,"status":1},
            {"date":"2018-10","value":95.86,"status":1},
            {"date":"2018-11","value":78.13,"status":1},
            {"date":"2018-12","value":98.86,"status":1},
            {"date":"2019-1","value":105.86,"status":0}, 
            {"date":"2019-2","value":110.86,"status":0}      
            ]; 

            /* Monday 2012 */
            var data1 = data
            var dateformat = "%Y-%m"
            drawTimeSeriesGraph(data1,dateformat);

            /* 
            Tooltip from: http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a
            line graph from here: http://www.d3noob.org/2012/12/starting-with-basic-d3-line-graph.html
            */

            function drawTimeSeriesGraph(data,dateformat) {

            //Set bounds for red dots
            var lbound = 0.045,
            ubound = 0.075;

            // Set the dimensions of the canvas / graph
            var margin = {top: 50, right: 150, bottom: 50, left: 50},
            width = 900- margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

            // Parse the date / time
            var parseDate = d3.time.format(dateformat).parse,
            formatDate = d3.time.format(dateformat),
            bisectDate = d3.bisector(function(d) { return d.date; }).left;

            // Set the ranges
            var x = d3.time.scale().range([0, width]);
            var y = d3.scale.linear().range([height, 0]);

            // Define the axes
            var xAxis = d3.svg.axis().scale(x)
            .orient("bottom").ticks(10);

            var yAxis = d3.svg.axis().scale(y)
            .orient("left").ticks(10);

            // Define the line
            var valueline = d3.svg.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.value); }).interpolate("linear");
            var full_date = new Date();
            var day = full_date.getDay(); //returns 0 - 6
            var month = full_date.getMonth()+1; //returns 0 - 11
            var year = full_date.getFullYear(); //returns 4 digit year ex: 2000
            var my =  year + "-" + month ;
            //alert(my);
            // Adds the svg canvas
            var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", 
            "translate(" + margin.left + "," + margin.top + ")");

            var lineSvg = svg.append("g"); 

            var focus = svg.append("g") 
            .style("display", "none");

            // Get the data

            data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.value = +d.value;
            });

            // Scale the range of the data
            x.domain(d3.extent(data, function(d) { return d.date; }));
            y.domain([0, d3.max(data, function(d) { return d.value; })]);
            //Use below if instead you want to define the y limits:
            //y.domain([0, 0.11]);

            // Add the valueline path.
            var lineGraph2 = lineSvg.append("path")
            .attr("class", "line")
            .attr("d", valueline(data.filter(function(d) {
            return d.status > 0;
            }))).attr("stroke", "blue").attr("stroke-width", 2)
            .attr("fill", "none");

            var lineGraph1 = lineSvg.append("path")
            .attr("class", "line")
            .attr("d", valueline(data.filter(function(d) {
            return d.status <= 0;
            }))).attr("stroke", "red").attr("stroke-width", 2)
            .attr("fill", "none");

            // Add the X Axis
            svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

            // Add the Y Axis
            svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

            // append the x line
            focus.append("line")
            .attr("class", "x")
            .style("stroke", "blue")
            .style("stroke-dasharray", "3,3")
            .style("opacity", 0.5)
            .attr("y1", 0)
            .attr("y2", height);

            // append the y line
            focus.append("line")
            .attr("class", "y")
            .style("stroke", "blue")
            .style("stroke-dasharray", "3,3")
            .style("opacity", 0.5)
            .attr("x1", width)
            .attr("x2", width);

            // append the circle at the intersection
            focus.append("circle")
            .attr("class", "y")
            .style("fill", "none")
            .style("stroke", "blue")
            .attr("r", 4);

            // place the value at the intersection
            focus.append("text")
            .attr("class", "y1")
            .style("stroke", "white")
            .style("stroke-width", "3.5px")
            .style("opacity", 0.8)
            .attr("dx", 8)
            .attr("dy", "-.3em");
            focus.append("text")
            .attr("class", "y2")
            .attr("dx", 8)
            .attr("dy", "-.3em");

            // place the date at the intersection
            focus.append("text")
            .attr("class", "y3")
            .style("stroke", "white")
            .style("stroke-width", "3.5px")
            .style("opacity", 0.8)
            .attr("dx", 8)
            .attr("dy", "1em");
            focus.append("text")
            .attr("class", "y4")
            .attr("dx", 8)
            .attr("dy", "1em");

            // append the rectangle to capture mouse
            svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all")
            .on("mouseover", function() { focus.style("display", null); })
            .on("mouseout", function() { focus.style("display", "none"); })
            .on("mousemove", mousemove);

            function mousemove() {
            var x0 = x.invert(d3.mouse(this)[0]),
            i = bisectDate(data, x0, 1),
            d0 = data[i - 1],
            d1 = data[i],
            d = x0 - d0.date > d1.date - x0 ? d1 : d0;

            focus.select("circle.y")
            .attr("transform",
            "translate(" + x(d.date) + "," +
            y(d.value) + ")");

            focus.select("text.y1")
            .attr("transform",
            "translate(" + x(d.date) + "," +
            y(d.value) + ")")
            .text(d.value.toFixed(2));

            focus.select("text.y2")
            .attr("transform",
            "translate(" + x(d.date) + "," +
            y(d.value) + ")")
            .text(d.value.toFixed(2));

            focus.select("text.y3")
            .attr("transform",
            "translate(" + x(d.date) + "," +
            y(d.value) + ")")
            .text(formatDate(d.date));

            focus.select("text.y4")
            .attr("transform",
            "translate(" + x(d.date) + "," +
            y(d.value) + ")")
            .text(formatDate(d.date));

            focus.select(".x")
            .attr("transform",
            "translate(" + x(d.date) + "," +
            y(d.value) + ")")
            .attr("y2", height - y(d.value));

            focus.select(".y")
            .attr("transform",
            "translate(" + width * -1 + "," +
            y(d.value) + ")")
            .attr("x2", width + width);
            };

            svg.append("text")
            .attr("x", (width / 2))             
            .attr("y", 0 - (margin.top / 2))
            .attr("text-anchor", "middle")  
            .style("font-size", "16px") 
            .style("text-decoration", "underline")  

            };

如何删除路径之间的空白，使线条看起来不像两个不同的图形？

Answer 1

代码完全按照您的要求执行:只有 2 个数据对象具有 status:0。因此，当您过滤数据时...

.attr("d", valueline(data.filter(function(d) {
    return d.status <= 0;
})))

...只有 2 个点用于生成蓝线，它创建了一条从第一条到第二条的单线。

取而代之的是，只获取最后的三个对象:

.attr("d", valueline(data.slice(-3)))

这样，您将得到三个点，因此得到两条线。

这里是你的代码有那个变化:

        var data = [{
            "date": "2018-1",
            "value": 40.13,
            "status": 1
          },
          {
            "date": "2018-2",
            "value": 45.88,
            "status": 1
          },
          {
            "date": "2018-3",
            "value": 50.89,
            "status": 1
          },
          {
            "date": "2018-4",
            "value": 55.87,
            "status": 1
          },
          {
            "date": "2018-5",
            "value": 88.54,
            "status": 1
          },
          {
            "date": "2018-6",
            "value": 74.41,
            "status": 1
          },
          {
            "date": "2018-7",
            "value": 98.56,
            "status": 1
          },
          {
            "date": "2018-8",
            "value": 81.05,
            "status": 1
          },
          {
            "date": "2018-9",
            "value": 58.13,
            "status": 1
          },
          {
            "date": "2018-10",
            "value": 95.86,
            "status": 1
          },
          {
            "date": "2018-11",
            "value": 78.13,
            "status": 1
          },
          {
            "date": "2018-12",
            "value": 98.86,
            "status": 1
          },
          {
            "date": "2019-1",
            "value": 105.86,
            "status": 0
          },
          {
            "date": "2019-2",
            "value": 110.86,
            "status": 0
          }
        ];

        /* Monday 2012 */
        var data1 = data
        var dateformat = "%Y-%m"
        drawTimeSeriesGraph(data1, dateformat);

        /* 
        Tooltip from: http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a
        line graph from here: http://www.d3noob.org/2012/12/starting-with-basic-d3-line-graph.html
        */

        function drawTimeSeriesGraph(data, dateformat) {

          //Set bounds for red dots
          var lbound = 0.045,
            ubound = 0.075;

          // Set the dimensions of the canvas / graph
          var margin = {
              top: 50,
              right: 150,
              bottom: 50,
              left: 50
            },
            width = 900 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

          // Parse the date / time
          var parseDate = d3.time.format(dateformat).parse,
            formatDate = d3.time.format(dateformat),
            bisectDate = d3.bisector(function(d) {
              return d.date;
            }).left;

          // Set the ranges
          var x = d3.time.scale().range([0, width]);
          var y = d3.scale.linear().range([height, 0]);

          // Define the axes
          var xAxis = d3.svg.axis().scale(x)
            .orient("bottom").ticks(10);

          var yAxis = d3.svg.axis().scale(y)
            .orient("left").ticks(10);

          // Define the line
          var valueline = d3.svg.line()
            .x(function(d) {
              return x(d.date);
            })
            .y(function(d) {
              return y(d.value);
            }).interpolate("linear");
          var full_date = new Date();
          var day = full_date.getDay(); //returns 0 - 6
          var month = full_date.getMonth() + 1; //returns 0 - 11
          var year = full_date.getFullYear(); //returns 4 digit year ex: 2000
          var my = year + "-" + month;
          //alert(my);
          // Adds the svg canvas
          var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

          var lineSvg = svg.append("g");

          var focus = svg.append("g")
            .style("display", "none");

          // Get the data

          data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.value = +d.value;
          });

          // Scale the range of the data
          x.domain(d3.extent(data, function(d) {
            return d.date;
          }));
          y.domain([0, d3.max(data, function(d) {
            return d.value;
          })]);
          //Use below if instead you want to define the y limits:
          //y.domain([0, 0.11]);

          // Add the valueline path.
          var lineGraph2 = lineSvg.append("path")
            .attr("class", "line")
            .attr("d", valueline(data.filter(function(d) {
              return d.status > 0;
            }))).attr("stroke", "blue").attr("stroke-width", 2)
            .attr("fill", "none");

          var lineGraph1 = lineSvg.append("path")
            .attr("class", "line")
            .attr("d", valueline(data.slice(-3))).attr("stroke", "red").attr("stroke-width", 2)
            .attr("fill", "none");

          // Add the X Axis
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

          // Add the Y Axis
          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

          // append the x line
          focus.append("line")
            .attr("class", "x")
            .style("stroke", "blue")
            .style("stroke-dasharray", "3,3")
            .style("opacity", 0.5)
            .attr("y1", 0)
            .attr("y2", height);

          // append the y line
          focus.append("line")
            .attr("class", "y")
            .style("stroke", "blue")
            .style("stroke-dasharray", "3,3")
            .style("opacity", 0.5)
            .attr("x1", width)
            .attr("x2", width);

          // append the circle at the intersection
          focus.append("circle")
            .attr("class", "y")
            .style("fill", "none")
            .style("stroke", "blue")
            .attr("r", 4);

          // place the value at the intersection
          focus.append("text")
            .attr("class", "y1")
            .style("stroke", "white")
            .style("stroke-width", "3.5px")
            .style("opacity", 0.8)
            .attr("dx", 8)
            .attr("dy", "-.3em");
          focus.append("text")
            .attr("class", "y2")
            .attr("dx", 8)
            .attr("dy", "-.3em");

          // place the date at the intersection
          focus.append("text")
            .attr("class", "y3")
            .style("stroke", "white")
            .style("stroke-width", "3.5px")
            .style("opacity", 0.8)
            .attr("dx", 8)
            .attr("dy", "1em");
          focus.append("text")
            .attr("class", "y4")
            .attr("dx", 8)
            .attr("dy", "1em");

          // append the rectangle to capture mouse
          svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all")
            .on("mouseover", function() {
              focus.style("display", null);
            })
            .on("mouseout", function() {
              focus.style("display", "none");
            })
            .on("mousemove", mousemove);

          function mousemove() {
            var x0 = x.invert(d3.mouse(this)[0]),
              i = bisectDate(data, x0, 1),
              d0 = data[i - 1],
              d1 = data[i],
              d = x0 - d0.date > d1.date - x0 ? d1 : d0;

            focus.select("circle.y")
              .attr("transform",
                "translate(" + x(d.date) + "," +
                y(d.value) + ")");

            focus.select("text.y1")
              .attr("transform",
                "translate(" + x(d.date) + "," +
                y(d.value) + ")")
              .text(d.value.toFixed(2));

            focus.select("text.y2")
              .attr("transform",
                "translate(" + x(d.date) + "," +
                y(d.value) + ")")
              .text(d.value.toFixed(2));

            focus.select("text.y3")
              .attr("transform",
                "translate(" + x(d.date) + "," +
                y(d.value) + ")")
              .text(formatDate(d.date));

            focus.select("text.y4")
              .attr("transform",
                "translate(" + x(d.date) + "," +
                y(d.value) + ")")
              .text(formatDate(d.date));

            focus.select(".x")
              .attr("transform",
                "translate(" + x(d.date) + "," +
                y(d.value) + ")")
              .attr("y2", height - y(d.value));

            focus.select(".y")
              .attr("transform",
                "translate(" + width * -1 + "," +
                y(d.value) + ")")
              .attr("x2", width + width);
          };

          svg.append("text")
            .attr("x", (width / 2))
            .attr("y", 0 - (margin.top / 2))
            .attr("text-anchor", "middle")
            .style("font-size", "16px")
            .style("text-decoration", "underline")

        };

.axis text {
  font-family: sans-serif;
  font-size: 9px;
}

.axis path {
  fill: none;
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>