{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Anthone 的问题《How to use more complex svg as chart point in bill》','https://www.manongdao.com/q-931809.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to use some custom points for a billboard chart. I can use a <path> element and it will be rendered as the data points.
What I want to do is to use some points that may be a grouping of svg elements, so I'm trying to use a <g> or <svg> with some elements inside those.
From what I can see, the chart <defs> only contains the g/svg wrapper, and none of the elements the g/svg contains.
Is there a way to make this work? So to have the entire g/svg element rendered ?
In the example below, I have use a 'circle' and a 'path' element, and those are rendered. I have also used g and svg with elements inside, and those are not rendered
One way it seems I can use onrendered to append the inner elements of the svg/g that I want to use, so that can be one way of doing it, although it doesn't seem to be the right way of doing it.
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>
The feature on setting groped node as custom point was implemented. Checkout the https://github.com/naver/billboard.js/issues/562 for more details.
From this changes, simply set the grouped node as value.