javascript - d3.js 带画笔的多折线图

标签 javascript d3.js graph

我正在尝试制作带有焦点和上下文窗口的多线图并实现刷选，但是当我运行代码时出现以下错误:

错误:属性 d:预期数字，“MNaN，334.72093023…”。 在我的代码中的第 274 行:

focus.selectAll("path.line").attr("d", function(d) {return line(d.values)});)

这不允许我在焦点图中绘制线条，只能在上下文图中绘制线条。

感谢任何帮助。

图形图像:/image/BmLOj.jpg

下面的代码

<!DOCTYPE html>

<head>
  <meta charset="utf-8" />
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <style>

    .axis--x path {
      display: none;
    }

    .axis--y path {
      display: none;
    }

    .line {
      fill: none;
      stroke-width: 1.5px;
    }

    .grid line {
      stroke: lightgrey;
      stroke-opacity: 0.7;
      shape-rendering: crispEdges;
    }

    .grid path {
      stroke-width: 0;
    }






  </style>
</head>

<body>
  <svg width="1080" height="500"></svg>
  <script type="text/javascript" src="d3.min.js"></script>
  <script>


    var svg = d3.select("svg"),
    margin = {top: 20, right: 160, bottom: 110, left: 60},
    margin2 = {top: 430, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    height2 = +svg.attr("height") - margin2.top - margin2.bottom;


    svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "#f5f5f1")

    var parseTime = d3.timeParse("%Y%m");

    var x = d3.scaleTime().range([0, width]),
    x2 = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    y2 = d3.scaleLinear().range([height2, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

    var xAxis = d3.axisBottom(x),
    xAxis2 = d3.axisBottom(x2),
    yAxis = d3.axisLeft(y);

    var brush = d3.brushX()
    .extent([[0, 0], [width, height2]])
    .on("brush end", brushed);


    var line = d3.line()
    .x(function (d) { return x(new Date(d.date)); })
    .y(function (d) { return y(d.hours); });

    var line2 = d3.line()
    .x(function (d) { return x2(new Date(d.date)); })
    .y(function (d) { return y2(d.hours); })

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


    var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");



    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }



    var colors = [];
    for(var i = 0; i < 50; i++)
    {
      var xx = getRandomColor();
      colors.push(xx);
      colors.push(xx);
    }




// gridlines in y axis function
function make_y_gridlines() {   
  return d3.axisLeft(y)
  .ticks(5)
}


d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  z.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseTime(d.date);
  });

  var employees = z.domain().map(function(id) {
    return {
      id: id,
      values: data.map(function(d) {
        return {date: d.date, hours: +d[id]};
      })
    };
  });


  var o1 = 0;
  var o2 = 0;

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    0,
    d3.max(employees, function(c) { return d3.max(c.values, function(d) { return d.hours; }); })
    ]);
  x2.domain(x.domain());
  y2.domain(y.domain());
  z.domain(employees.map(function(c) { return c.id; }));




  var focuslineGroups = focus.selectAll("g")
  .data(employees)
  .enter().append("g");

  var focuslines = focuslineGroups.append("path")
  .attr("class","line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) {return colors[o1++]})
  .attr("clip-path", "url(#clip)");

  focus.append("g")     
  .attr("class", "grid")
  .call(make_y_gridlines()
    .tickSize(-width)
    .tickFormat("")
    )

  focus.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

  focus.append("g")
  .attr("class", "axis axis--y")
  .call(yAxis);

  var contextlineGroups = context.selectAll("g")
  .data(employees)
  .enter().append("g");

  var contextLines = contextlineGroups.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line2(d.values); })
  .style("stroke", function(d) {return colors[o2++]})
  .attr("clip-path", "url(#clip)");


  context.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height2 + ")")
  .call(xAxis2);

  context.append("g")
  .attr("class", "brush")
  .call(brush)
  .call(brush.move, x.range());


});



function brushed() {
  x.domain(brush.extent());
  focus.selectAll("path.line").attr("d",  function(d) {return line(d.values)});
  focus.select(".x.axis").call(xAxis);
  focus.select(".y.axis").call(yAxis);
}





</script>
</body>

</html>

data.csv 文件:

date,Paul Productive Code,Paul Raw Code,Michelle Productive Code,Michelle Raw Code,mario pro code,mario raw code
201801,4.1,3.2,2.2,1.9,20,30
201802,4.2,3.5,3.4,1.9,20,30
201803,4.1,3.1,3.1,1.9,20,30
201804,4.5,3.8,3.2,2.3,24,20
201805,6.4,4.7,3.7,2.7,25,43
201806,8.6,5.5,3.2,2.2,26,20

最佳答案 

<html>
<head>
  <meta charset="utf-8" />
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <style>

    .axis--x path {
      display: none;
    }

    .axis--y path {
      display: none;
    }

    .line {
      fill: none;
      stroke-width: 1.5px;
    }

    .grid line {
      stroke: lightgrey;
      stroke-opacity: 0.7;
      shape-rendering: crispEdges;
    }

    .grid path {
      stroke-width: 0;
    }

  </style>
</head>

<body>
  <svg width="700" height="500"></svg>
  <script type="text/javascript" src="d3.min.js"></script>
  <script>
var data = [
  {
    "date": 201801,
    "Paul Productive Code": 4.1,
    "Paul Raw Code": 3.2,
    "Michelle Productive Code": 2.2,
    "Michelle Raw Code": 1.9,
    "mario pro code": 20,
    "mario raw code": 30
  },
  {
    "date": 201802,
    "Paul Productive Code": 4.2,
    "Paul Raw Code": 3.5,
    "Michelle Productive Code": 3.4,
    "Michelle Raw Code": 1.9,
    "mario pro code": 20,
    "mario raw code": 30
  },
  {
    "date": 201803,
    "Paul Productive Code": 4.1,
    "Paul Raw Code": 3.1,
    "Michelle Productive Code": 3.1,
    "Michelle Raw Code": 1.9,
    "mario pro code": 20,
    "mario raw code": 30
  },
  {
    "date": 201804,
    "Paul Productive Code": 4.5,
    "Paul Raw Code": 3.8,
    "Michelle Productive Code": 3.2,
    "Michelle Raw Code": 2.3,
    "mario pro code": 24,
    "mario raw code": 20
  },
  {
    "date": 201805,
    "Paul Productive Code": 6.4,
    "Paul Raw Code": 4.7,
    "Michelle Productive Code": 3.7,
    "Michelle Raw Code": 2.7,
    "mario pro code": 25,
    "mario raw code": 43
  },
  {
    "date": 201806,
    "Paul Productive Code": 8.6,
    "Paul Raw Code": 5.5,
    "Michelle Productive Code": 3.2,
    "Michelle Raw Code": 2.2,
    "mario pro code": 26,
    "mario raw code": 20
  }
];

    var svg = d3.select("svg"),
    margin = {top: 20, right: 160, bottom: 110, left: 60},
    margin2 = {top: 430, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    height2 = +svg.attr("height") - margin2.top - margin2.bottom;


    svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "#f5f5f1")

    var parseTime = d3.timeParse("%Y%m");

    var x = d3.scaleTime().range([0, width]),
    x2 = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    y2 = d3.scaleLinear().range([height2, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

    var xAxis = d3.axisBottom(x),
    xAxis2 = d3.axisBottom(x2),
    yAxis = d3.axisLeft(y);

    var brush = d3.brushX()
    .extent([[0, 0], [width, height2]])
    .on("brush end", brushed);


    var line = d3.line()
    .x(function (d) { return x(new Date(d.date)); })
    .y(function (d) { return y(d.hours); });

    var line2 = d3.line()
    .x(function (d) { return x2(new Date(d.date)); })
    .y(function (d) { return y2(d.hours); })

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


    var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");



    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }



    var colors = [];
    for(var i = 0; i < 50; i++)
    {
      var xx = getRandomColor();
      colors.push(xx);
      colors.push(xx);
    }




// gridlines in y axis function
function make_y_gridlines() {   
  return d3.axisLeft(y)
  .ticks(5)
}

  z.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseTime(d.date);
  });

  var employees = z.domain().map(function(id) {
    return {
      id: id,
      values: data.map(function(d) {
        return {date: d.date, hours: +d[id]};
      })
    };
  });


  var o1 = 0;
  var o2 = 0;

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    0,
    d3.max(employees, function(c) { return d3.max(c.values, function(d) { return d.hours; }); })
    ]);
  x2.domain(x.domain());
  y2.domain(y.domain());
  z.domain(employees.map(function(c) { return c.id; }));

  var focuslineGroups = focus.selectAll("g")
  .data(employees)
  .enter().append("g");

  var focuslines = focuslineGroups.append("path")
  .attr("class","line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) {return colors[o1++]})
  .attr("clip-path", "url(#clip)");

  focus.append("g")     
  .attr("class", "grid")
  .call(make_y_gridlines()
    .tickSize(-width)
    .tickFormat("")
    )

  focus.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

  focus.append("g")
  .attr("class", "axis axis--y")
  .call(yAxis);

  var contextlineGroups = context.selectAll("g")
  .data(employees)
  .enter().append("g");

  var contextLines = contextlineGroups.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line2(d.values); })
  .style("stroke", function(d) {return colors[o2++]})
  .attr("clip-path", "url(#clip)");


  context.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height2 + ")")
  .call(xAxis2);

  context.append("g")
  .attr("class", "brush")
  .call(brush)
  .call(brush.move, x.range());

function brushed() {
  var extent = d3.event.selection;
  var s = extent.map(x2.invert, x2);
  x.domain(s);
  focuslines.attr("d", function(d) {
    return line(d.values)
  });
  focus.select(".axis--x").call(xAxis);
  focus.select(".axis--y").call(yAxis);
}

</script>
</body>

</html>

您将 x 域设置为错误的内容。 brush.extent() 不是您要寻找的。应该是 d3.event.selection，然后您必须从 x 比例缩小。

var s = d3.event.selection;
var invertedS = s.map(x.invert);

而且你的线路选择与它的外观有点偏离。应该是:

focuslines.attr("d", function(d) {
  return line(d.values)
});
focus.select(".axis--x").call(xAxis);
focus.select(".axis--y").call(yAxis);

.x.axis 不是您之前创建的类。

关于javascript - d3.js 带画笔的多折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49139527/

上一篇：javascript - 用 JS 重新加载单独的输入

下一篇：javascript - 确定最佳项目统计组合的最佳实践

相关文章：

algorithm - 联合查找树上的操作？

javascript - Angular 1.6.0 : "Possibly unhandled rejection" error

javascript - Uncaught ReferenceError :ajax is not defined (repeated 2 times)

javascript - 可变对象属性行为

d3.js - 如何在呈现图表后为 dc.js 图表应用工具提示

python - 如何从边缘列表创建 python-igraph 图

Javascript:检查字符串是否包含字符，然后删除字符串的一部分？

javascript - 文本在悬停时错位

javascript - D3 js链接图像节点之间的长度

c# - 旋转 Flot 刻度标签

©2024 IT工具网  联系我们