时间戳

首页 > 解决方案 > 如何在 billboard.js 中使用更复杂的 svg 作为图表点？

javascript - 如何在 billboard.js 中使用更复杂的 svg 作为图表点？

问题描述

我正在尝试为广告牌图表使用一些自定义点。我可以使用一个<path>元素，它将呈现为数据点。

我想要做的是使用一些可能是一组 svg 元素的点，所以我试图在其中使用 a <g>or<svg>一些元素。

据我所知，该图表<defs>仅包含 g/svg 包装器，而 g/svg 不包含任何元素。

有没有办法使这项工作？所以要渲染整个 g/svg 元素？

在下面的示例中，我使用了一个“圆圈”和一个“路径”元素，并且它们被渲染了。我还使用了 g 和 svg 与里面的元素，这些没有被渲染

一种方法似乎是我可以使用 onrendered 来附加我想要使用的 svg/g 的内部元素，所以这可能是一种方法，尽管它似乎不是正确的方法。

svg defs path {
  stroke: black;
  opacity: 0.2;
}

svg defs g rect {
   stroke: black;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
 <div id="chart"></div>
  <script>
var simpleG = "<g id='smpl'><rect x='10' y='10' width='10' height='10'></rect><circle cx='1' cy='1' r='10'></circle></g>";
var onePath ="<path d='M 64 0 c -35.347 0 -64 28.653 -64 64 s 28.653 64 64 64 s 64 -28.653 64 -64 s -28.653 -64 -64 -64 Z M 101.657 81.213 c -3.124 3.124 -8.189 3.124 -11.314 0 l -26.343 -26.343 l -26.343 26.343 c -3.124 3.124 -8.189 3.124 -11.314 0 s -3.125 -8.189 0 -11.314 l 32 -32 c 1.448 -1.448 3.448 -2.343 5.657 -2.343 s 4.209 0.895 5.657 2.343 l 32 32 c 3.124 3.124 3.124 8.189 0 11.314 Z'/>";
var oneG = "<g id='g'><path id='gp' d='M114.342,26.343l-50.342,50.343l-50.343,-50.343c-3.1240000000000006,-3.125,-8.189,-3.125,-11.315,0s-3.124,8.189,0,11.314l56,56.00000000000001c1.4480000000000004,1.4479999999999933,3.4480000000000004,2.3430000000000035,5.658000000000001,2.3430000000000035s4.209000000000003,-0.894999999999996,5.6569999999999965,-2.3430000000000035l56,-56c3.1240000000000094,-3.1240000000000023,3.1240000000000094,-8.189,0,-11.314s-8.189000000000007,-3.125,-11.314999999999998,0Z'></path><circle id='gc' cx='1' cy='1' r='10'></circle></g>";
var oneSVG = "<svg id='s'><path id='sp' d='M69.657,26.343c-1.4479999999999933,-1.4480000000000004,-3.4479999999999933,-2.343,-5.6569999999999965,-2.343s-4.209000000000003,0.8949999999999996,-5.6569999999999965,2.343l-56,56c-3.124,3.1239999999999952,-3.124,8.189000000000007,0,11.314000000000007s8.189,3.1239999999999952,11.315,0l50.342,-50.343l50.343,50.343c3.1239999999999952,3.1239999999999952,8.189000000000007,3.1239999999999952,11.314999999999998,0s3.125000000000014,-8.188999999999993,0,-11.313999999999993l-56.00099999999999,-56Z' style='fill:khaki; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;'></path><circle id='sc' cx='2' cy='2' style='fill:none;stroke:yellow;stroke-width:2px;'' r='10'></circle></svg>";
var chart = bb.generate({
  data: {
    columns: [
      ["data1", 100, 400, 1000, 900, 500],
      ["data2", 20, 40, 500, 300, 200],
      ["data3", 80, 350, 800, 450, 500],
      ["data4", 150, 240, 300, 700, 300],
      ["data5", 200, 140, 30, 70, 30]
    ]
  },
  point: {
    pattern: [
      "circle",
      onePath,
      simpleG,
      oneSVG,
      oneG,
    ]
  },
  bindto: "#chart",
  //hacky
  onrendered: function() {
    d3.select("svg defs g").html("<circle cx='0' cy='0' r='10'></circle><rect x='-5' y='-5' width='10' height='10'></rect>")
  }
});
  </script>
</body>

</html>

标签： javascriptsvgchartsbillboard.js

解决方案

实现了将 groped 节点设置为自定义点的功能。查看https://github.com/naver/billboard.js/issues/562了解更多详情。

从此更改中，只需将分组节点设置为值。

point: {
    pattern: [
        "<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10'></rect></g>"
    ]
}

推荐阅读