@domoinc/multiline-chart
Version:
MultiLineChart - Domo Widget
29 lines (28 loc) • 1.14 kB
JavaScript
//To use this utility, pass in any container with paths inside of it and it will convert the paths to a dot
//matrix. It works really well on maps, but I haven't implemented a way for it to work with zoomable maps yet.
//Anybody?
d3.shapeToGrid = function(container){
var allPaths = container.selectAll("path"),
i = 0,
defs = d3.select('#defs');
allPaths.each(function(){
i++;
var bb = this.getBBox(),
svgBB = container.node().getBBox(),
path = d3.select(this).attr("d"),
color = d3.select(this).style("fill"),
parent = d3.select(this.parentNode),
defsClip = defs.append("clipPath").attr("id","clip"+i).append("path").attr('d',path),
group = parent.append('g').attr('clip-path',"url(#clip"+i+")"),
xCount = Math.ceil(bb.width / 5)+1,
yCount = Math.ceil(bb.height / 5)+1,
newX = Math.floor(bb.x/5)*5,
newY = Math.floor(bb.y/5)*5;
for (var cy = 0; cy < yCount; cy++){
for (var cx = 0; cx < xCount; cx++){
group.append("circle").attr("cx",cx*5+2.5+newX).attr("cy",cy*5+2.5+newY).attr("r",2).style("fill",color);
}
}
d3.select(this).remove();
});
}