搜索
搜索

如何在d3中的每行中制作带有虚线段的多折线图

ParagDineshGupta 发表于 Dev
48
帕拉·迪涅什·古普塔

数据如下：

var data = [
  {
    name: 'USA',
    values: [
      { date: '2000', price: '100', isDashed:true },
      { date: '2001', price: '110', isDashed:true },
      { date: '2002', price: '145', isDashed:false },...
      ,
  {
    name: 'Canada',
    values: [
      { date: '2000', price: '200',isDashed:true  },
      { date: '2001', price: '120',isDashed:true  },
      { date: '2002', price: '33',isDashed:true  }...
    ]
  }
]

我正在关注此链接https://codesandbox.io/s/multi-line-chart-example-forked-hjix5?file=/src/index.js

问题是，在我的数据中有一个isDashed标记，当它为真时，我需要像这样的图表中的虚线段。 在此处输入图片说明

var data = [{
    name: "USA",
    values: [{
        date: "2000",
        price: "100",
        r: 1
      },
      {
        date: "2001",
        price: "110",
        r: 1
      },
      {
        date: "2002",
        price: "145"
      },
      {
        date: "2003",
        price: "241"
      },
      {
        date: "2004",
        price: "101"
      },
      {
        date: "2005",
        price: "90"
      },
      {
        date: "2006",
        price: "10"
      },
      {
        date: "2007",
        price: "35"
      },
      {
        date: "2008",
        price: "21"
      },
      {
        date: "2009",
        price: "201"
      }
    ]
  },
  {
    name: "Canada",
    values: [{
        date: "2000",
        price: "200"
      },
      {
        date: "2001",
        price: "120"
      },
      {
        date: "2002",
        price: "33"
      },
      {
        date: "2003",
        price: "21"
      },
      {
        date: "2004",
        price: "51"
      },
      {
        date: "2005",
        price: "190"
      },
      {
        date: "2006",
        price: "120"
      },
      {
        date: "2007",
        price: "85"
      },
      {
        date: "2008",
        price: "221"
      },
      {
        date: "2009",
        price: "101"
      }
    ]
  },
  {
    name: "Maxico",
    values: [{
        date: "2000",
        price: "50"
      },
      {
        date: "2001",
        price: "10"
      },
      {
        date: "2002",
        price: "5"
      },
      {
        date: "2003",
        price: "71"
      },
      {
        date: "2004",
        price: "20"
      },
      {
        date: "2005",
        price: "9"
      },
      {
        date: "2006",
        price: "220"
      },
      {
        date: "2007",
        price: "235"
      },
      {
        date: "2008",
        price: "61"
      },
      {
        date: "2009",
        price: "10"
      }
    ]
  }
];

var width = 500;
var height = 300;
var margin = 50;
var duration = 250;

var lineOpacity = "0.25";
var lineOpacityHover = "0.85";
var otherLinesOpacityHover = "0.1";
var lineStroke = "1.5px";
var lineStrokeHover = "2.5px";

var circleOpacity = "0.85";
var circleOpacityOnLineHover = "0.25";
var circleRadius = 3;
var circleRadiusHover = 6;

/* Format Data */
var parseDate = d3.timeParse("%Y");
data.forEach(function(d) {
  d.values.forEach(function(d) {
    d.date = parseDate(d.date);
    d.price = +d.price;
    d.r = +d.r;
  });
});

/* Scale */
var xScale = d3
  .scaleTime()
  .domain(d3.extent(data[0].values, (d) => d.date))
  .range([0, width - margin]);

var yScale = d3
  .scaleLinear()
  .domain([0, d3.max(data[0].values, (d) => d.price)])
  .range([height - margin, 0]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

/* Add SVG */
var svg = d3
  .select("#chart")
  .append("svg")
  .attr("width", width + margin + "px")
  .attr("height", height + margin + "px")
  .append("g")
  .attr("transform", `translate(${margin}, ${margin})`);

/* Add line into SVG */
var line = d3
  .line()
  .x((d) => xScale(d.date))
  .y((d) => yScale(d.price));

let lines = svg.append("g").attr("class", "lines");

lines
  .selectAll(".line-group")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "line-group")
  .on("mouseover", function(d, i) {
    svg
      .append("text")
      .attr("class", "title-text")
      .style("fill", color(i))
      .text(d.name)
      .attr("text-anchor", "middle")
      .attr("x", (width - margin) / 2)
      .attr("y", 5)
      .attr("r", 5);
  })
  .on("mouseout", function(d) {
    svg.select(".title-text").remove();
  })
  .append("path")
  .attr("class", "line")
  .attr("d", (d) => line(d.values))

  .style("stroke", (d, i) => color(i))
  .style("opacity", lineOpacity)
  .on("mouseover", function(d) {
    d3.selectAll(".line").style("opacity", otherLinesOpacityHover);
    d3.selectAll(".circle").style("opacity", circleOpacityOnLineHover);
    d3.select(this)
      .style("opacity", lineOpacityHover)
      .style("stroke-width", lineStrokeHover)
      .style("cursor", "pointer");
  })
  .on("mouseout", function(d) {
    d3.selectAll(".line").style("opacity", lineOpacity);
    d3.selectAll(".circle").style("opacity", circleOpacity);
    d3.select(this)
      .style("stroke-width", lineStroke)
      .style("cursor", "none");
  });

/* Add circles in the line */
lines
  .selectAll("circle-group")
  .data(data)
  .enter()
  .append("g")
  .style("fill", (d, i) => color(i))
  .selectAll("circle")
  .data((d) => d.values)
  .enter()
  .append("g")
  .attr("class", "circle")
  .on("mouseover", function(d) {
    d3.select(this)
      .style("cursor", "pointer")
      .append("text")
      .attr("class", "text")
      .text(`${d.price}`)
      .attr("x", (d) => xScale(d.date) + 5)
      .attr("y", (d) => yScale(d.price) - 10);
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .style("cursor", "none")
      .transition()
      .duration(duration)
      .selectAll(".text")
      .remove();
  })
  .append("circle")
  .attr("cx", (d) => xScale(d.date))
  .attr("cy", (d) => yScale(d.price))
  .attr("r", circleRadius)
  .style("opacity", circleOpacity)
  .on("mouseover", function(d) {
    d3.select(this)
      .transition()
      .duration(duration)
      .attr("r", circleRadiusHover);
  })
  .on("mouseout", function(d) {
    d3.select(this).transition().duration(duration).attr("r", circleRadius);
  });

/* Add Axis into SVG */
var xAxis = d3.axisBottom(xScale).ticks(5);
var yAxis = d3.axisLeft(yScale).ticks(5);

svg
  .append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0, ${height - margin})`)
  .call(xAxis);

svg
  .append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("y", 15)
  .attr("transform", "rotate(-90)")
  .attr("fill", "#000")
  .text("Total values");
.App {
  font-family: sans-serif;
  text-align: center;
}

svg {
  font-family: Sans-Serif, Arial;
}

.line {
  stroke-width: 2;
  fill: none;
}

.axis path {
  stroke: black;
}

.text {
  font-size: 12px;
}

.title-text {
  font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="App">
  <div id="chart" />
</div>

鲁本·赫斯鲁特（Ruben Helsloot）

正如我在评论中说的那样，您似乎希望该线段既是虚线的，又是较浅的颜色。最简单的解决方法是仅绘制两个单独的线段。较难的解决方案是将笔触-dasharray和线性渐变结合使用作为笔触，但这可能容易出错。

由于您似乎不太在意，因此以下代码显示了更简单的解决方法：

var data = [{
    name: "USA",
    values: [{
        date: "2000",
        price: "100",
        r: 1,
      isDashed: true
      },
      {
        date: "2001",
        price: "110",
        r: 1,
        isDashed: true
      },
      {
        date: "2002",
        price: "145",
        isDashed: true
      },
      {
        date: "2003",
        price: "241",
        isDashed: true
      },
      {
        date: "2004",
        price: "101",
        isDashed: true
      },
      {
        date: "2005",
        price: "90",
        isDashed: true
      },
      {
        date: "2006",
        price: "10",
        isDashed: true
      },
      {
        date: "2007",
        price: "35"
      },
      {
        date: "2008",
        price: "21"
      },
      {
        date: "2009",
        price: "201"
      }
    ]
  },
  {
    name: "Canada",
    values: [{
        date: "2000",
        price: "200"
      },
      {
        date: "2001",
        price: "120"
      },
      {
        date: "2002",
        price: "33"
      },
      {
        date: "2003",
        price: "21"
      },
      {
        date: "2004",
        price: "51",
        isDashed: true
      },
      {
        date: "2005",
        price: "190",
        isDashed: true
      },
      {
        date: "2006",
        price: "120",
        isDashed: true
      },
      {
        date: "2007",
        price: "85"
      },
      {
        date: "2008",
        price: "221"
      },
      {
        date: "2009",
        price: "101"
      }
    ]
  },
  {
    name: "Maxico",
    values: [{
        date: "2000",
        price: "50"
      },
      {
        date: "2001",
        price: "10"
      },
      {
        date: "2002",
        price: "5",
        isDashed: true
      },
      {
        date: "2003",
        price: "71"
      },
      {
        date: "2004",
        price: "20"
      },
      {
        date: "2005",
        price: "9"
      },
      {
        date: "2006",
        price: "220"
      },
      {
        date: "2007",
        price: "235"
      },
      {
        date: "2008",
        price: "61"
      },
      {
        date: "2009",
        price: "10"
      }
    ]
  }
];

var width = 500;
var height = 300;
var margin = 50;
var duration = 250;

var lineOpacity = "0.25";
var lineOpacityHover = "0.85";
var otherLinesOpacityHover = "0.1";
var lineStroke = "1.5px";
var lineStrokeHover = "2.5px";

var circleOpacity = "0.85";
var circleOpacityOnLineHover = "0.25";
var circleRadius = 3;
var circleRadiusHover = 6;

/* Format Data */
var parseDate = d3.timeParse("%Y");
data.forEach(function(d) {
  d.values.forEach(function(d) {
    d.date = parseDate(d.date);
    d.price = +d.price;
    d.r = +d.r;
  });
});

/* Scale */
var xScale = d3
  .scaleTime()
  .domain(d3.extent(data[0].values, (d) => d.date))
  .range([0, width - margin]);

var yScale = d3
  .scaleLinear()
  .domain([0, d3.max(data[0].values, (d) => d.price)])
  .range([height - margin, 0]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

/* Add SVG */
var svg = d3
  .select("#chart")
  .append("svg")
  .attr("width", width + margin + "px")
  .attr("height", height + margin + "px")
  .append("g")
  .attr("transform", `translate(${margin}, ${margin})`);

/* Add line into SVG */
var line = d3
  .line()
  .defined(d => !isNaN(d.price)) // to make it deal with NaNs
  .x((d) => xScale(d.date))
  .y((d) => yScale(d.price));

let lines = svg.append("g").attr("class", "lines");

let lineGroups = lines
  .selectAll(".line-group")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "line-group")
  .on("mouseover", function(d, i) {
    svg
      .append("text")
      .attr("class", "title-text")
      .style("fill", color(i))
      .text(d.name)
      .attr("text-anchor", "middle")
      .attr("x", (width - margin) / 2)
      .attr("y", 5)
      .attr("r", 5);
  })
  .on("mouseout", function(d) {
    svg.select(".title-text").remove();
  });

function getDashedParts(values, lookingForDashed) {
  const results = [];
  let previousWasMatch = false;
  
  // For every node we add, we need also the node just before,
  // so we can draw a line between them
  values.forEach((v, i) => {
    if(lookingForDashed === !!v.isDashed) {
      if (!previousWasMatch && i > 0) {
        results.push(values[i - 1]);
      }
      results.push(v);
      previousWasMatch = true;
    } else {
      results.push({ date: v.date, price: NaN });
      previousWasMatch = false;
    }
  });
  
  // console.log(results);
  return results;
}

lineGroups
  .append("path")
  .attr("class", "line")
  .attr("d", (d) => line(getDashedParts(d.values, false)));

lineGroups
  .append("path")
  .attr("class", "line line-dashed")
  .attr("d", (d) => line(getDashedParts(d.values, true)));

lineGroups.each(function(d, i) {
  const lineParts = d3.select(this).selectAll("path");
  lineParts
    .style("stroke", color(i))
    .style("opacity", lineOpacity)
    .on("mouseover", () => {
      d3.selectAll(".line").style("opacity", otherLinesOpacityHover);
      d3.selectAll(".circle").style("opacity", circleOpacityOnLineHover);
      lineParts
        .style("opacity", lineOpacityHover)
        .style("stroke-width", lineStrokeHover)
        .style("cursor", "pointer");
    })
    .on("mouseout", () => {
      d3.selectAll(".line").style("opacity", lineOpacity);
      d3.selectAll(".circle").style("opacity", circleOpacity);
      lineParts
        .style("stroke-width", lineStroke)
        .style("cursor", "none");
    });
});

/* Add circles in the line */
lines
  .selectAll("circle-group")
  .data(data)
  .enter()
  .append("g")
  .style("fill", (d, i) => color(i))
  .selectAll("circle")
  .data((d) => d.values)
  .enter()
  .append("g")
  .attr("class", "circle")
  .on("mouseover", function(d) {
    d3.select(this)
      .style("cursor", "pointer")
      .append("text")
      .attr("class", "text")
      .text(`${d.price}`)
      .attr("x", (d) => xScale(d.date) + 5)
      .attr("y", (d) => yScale(d.price) - 10);
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .style("cursor", "none")
      .transition()
      .duration(duration)
      .selectAll(".text")
      .remove();
  })
  .append("circle")
  .attr("cx", (d) => xScale(d.date))
  .attr("cy", (d) => yScale(d.price))
  .attr("r", circleRadius)
  .style("opacity", circleOpacity)
  .on("mouseover", function(d) {
    d3.select(this)
      .transition()
      .duration(duration)
      .attr("r", circleRadiusHover);
  })
  .on("mouseout", function(d) {
    d3.select(this).transition().duration(duration).attr("r", circleRadius);
  });

/* Add Axis into SVG */
var xAxis = d3.axisBottom(xScale).ticks(5);
var yAxis = d3.axisLeft(yScale).ticks(5);

svg
  .append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0, ${height - margin})`)
  .call(xAxis);

svg
  .append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("y", 15)
  .attr("transform", "rotate(-90)")
  .attr("fill", "#000")
  .text("Total values");
.App {
  font-family: sans-serif;
  text-align: center;
}

svg {
  font-family: Sans-Serif, Arial;
}

.line {
  stroke-width: 2;
  fill: none;
}

.line-dashed {
  stroke-dasharray: 5,5;
}

.axis path {
  stroke: black;
}

.text {
  font-size: 12px;
}

.title-text {
  font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="App">
  <div id="chart" />
</div>

我所做的：

  1. 我增加了isDefined()对的定义，d3.line()以便可以处理NaN。
  2. 我用isDashed true或false过滤了每个数组的值。当我找到一个匹配的元素而前一个不匹配时，我将两者都添加到了结果集中。这样，将在它们之间画一条线，并且不会出现间隙。
  3. 我稍微改变了鼠标悬停的行为，因此如果将鼠标悬停在虚线和实线部分上，都将突出显示。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在D3中绘制具有复杂数据结构的折线图

如何在谷歌折线图中制作虚线

带有Angular-cli的D3 V4多折线图

D3折线图曲线段

在 d3 中，如何将样式应用到折线图的折线图和折线图下方的区域？

如何在cn1中制作折线图

如何在 kotlin 的 android studio 中制作折线图

D3中的嵌套图和折线图

D3中的折线图动态数据更新

d3中json数据的折线图

D3中的动画折线图

在折线图D3中获得平滑的动画

如何在python中绘制“多线”折线图？

如何在matplotlib中制作具有不同y轴的堆叠折线图？

如何使X轴在d3折线图图形中可滚动

如何在matplotlib中绘制带有错误值的折线图？

如何在r中绘制带有打开圆圈的折线图？

如何在d3多折线图中使用json数据而不是tsv文件？

具有JSON数据的D3可重用多折线图

这个 D3 多系列折线图中的 row 函数有什么作用？

带有路径和 SVG 的 d3 动画折线图

带有x和y轴的d3 v4拖动折线图

D3：如何为多系列折线图使用exit（）。remove（）

D3折线图中的实线和虚线

如何在具有两个数据集的 d3 折线图中添加标记

如何在较旧版本的Excel中测试在Excel 2016中制作的折线图

如何从CSV在Javascript中制作折线图？

如何从 R 中的 prop.table 制作折线图？

d3累积折线图

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档