chart = {
const barWidth = getBarWidth();
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + barWidth, height]);
const legendList = d3.select('#label')
.selectAll('li')
.data(data)
.join('li')
.text(d => d.time)
.on('mouseover', function() { d3.select(this).style('background', 'blue') })
.on('mouseout', function() { d3.select(this).style('background', 'none') })
.on('click', function () {
const id = d3.select(this).text();
const rect = d3.select('#unx'+ id);
rect.attr('fill', 'red');
})
const crossHairG = svg.append('g');
const crosshair = crossHairG.append('g')
.attr('class', 'line');
crosshair.append('line')
.attr('id', 'crosshairY')
.attr("y1", 0)
.attr("y2", height)
.attr('stroke', '#aaaaaa')
.attr('stroke-width', barWidth + 10 + 'px')
.style('display', 'none');
const brush = d3.brushX()
.extent([[margin.left - barWidth / 2, 0], [width - margin.right, height - margin.bottom + 0.5]])
.on("end", brushEnded);
svg.append("g")
.call(brush);
svg.append("g")
.attr("fill", color)
.selectAll("rect")
.data(data)
.join("rect")
.attr('id', d => 'unx' + d.time)
.attr("x", (d, i) => x(d.time) - barWidth/2)
.attr("y", d => y(d.count))
.attr("height", d => y(0) - y(d.count))
.attr("width", barWidth)
.on('mouseover', onMouseOver)
.on('mousemove', onMouseMove)
.on('mouseout', onMouseOut);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const yGrid = g => g
.attr("transform", "translate(" + margin.left + ",0)")
.call(d3.axisLeft(y).tickSize(-width + margin.right))
.call(g => g.selectAll("text").remove())
.call(g => g.select('path').remove())
svg.append("g")
.attr("class", "y-grid")
.style("opacity", 0.08);
svg.selectAll(".y-grid").transition().duration(0)
.call(yGrid);
return svg.node();
}