chart = {
let parent = this;
parent = document.createElement("div");
const tooltip = d3.select(document.createElement("div")).call(createTooltip);
const svg = d3.select(DOM.svg(width, height));
const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`);
var groups = svg.append("g")
.selectAll("g").data(datar).enter()
.append("g")
.attr("class", function(d) { return d[0]})
.attr("fill", function(d) { return color1(d[0])});
groups.selectAll('.bar-container')
.data(d => d[1])
.join("rect")
.attr("class", function (d) {
console.log(d.option)
return "temp "})
.attr("class", function (d) { return "temp "})
.attr("id", d => d.code)
.attr("x", d => x(d.code) + xBars(d.option))
.attr("y", function (d) {if (d[d.option] > 1) { return y(d[d.option])} else
{ return y(0) } })
.attr("height",
function (d) {if (d[d.option] > 0) { return y(0) - y(d[d.option])}
else {return y(d[d.option]) - y(0) }
})
.attr("width", x.bandwidth() / variables.length)
const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none");
svg.append("path")
.datum(datar)
.attr("fill", "none")
.attr("stroke", "darkgreen")
.attr("stroke-width", 2.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", uline);
svg.append("path")
.datum(datar)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", lline);
const gx = svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const t = svg.transition()
.duration(750);
gx.transition(t)
.call(xAxis)
.selectAll("text")
.attr("class", "legend-text")
.attr("y", 0)
.attr("x", 9)
.attr('fill', 'navy')
.attr("transform", "rotate(90)")
.attr("text-anchor", "start");
svg.on("mousemove", function(event) {
let [x,y] = d3.pointer(event, g.node());
line.attr("transform", `translate(${x+40} 0)`);
y +=20;
if(x>width/2) x-= 100;
tooltip
.style("left", x + "px")
.style("top", y + "px")
})
parent.appendChild(svg.node());
parent.appendChild(tooltip.node());
return Object.assign(parent, {
update(order) {
const t = svg.transition()
.duration(750);
switch(order) {
case 'high52':
case 'low52':
case 'buyprice':
case 'localprice':
}
gx.transition(t)
.call(xAxis)
.selectAll("text")
.attr("class", "legend-text")
.attr("y", 0)
.attr("x", 9)
.style("font-family", "sans-serif")
.style('font-size', '10px')
.attr('fill', 'navy')
.attr("transform", "rotate(90)")
.attr("text-anchor", "start");
}
});
}