JSFiddle - React, Tailwind, and code Playground

by Shang-De You

CSS

.xAxis path, .xAxis line, .yAxis path, .yAxis line{
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.xAxis text, .yAxis text {
  font-family: sans-serif;
  font-size: 11px;
}

.rect {
  fill: steelblue;
}

.linePath {
  stroke: steelblue;
  stroke-width: 2px;
  fill: none;
}

.overlay {
  fill: none;
  pointer-events: all;
}

JavaScript

var rand = d3.random.normal(170, 10)

var dataSet = []

for(var i=0; i<100; i++){
	dataSet.push(rand())
}

var width = 500
var height = 380
var padding = {top:30, right:30, bottom:30, left:30}

var svg = d3.select("body").append("svg")
	.attr("width",width)
  .attr("height",height)

// -- layout --
var binNum = 8, rangeMin = 130, rangeMax = 210

var histogram = d3.layout.histogram()
	.range([rangeMin, rangeMax])
  .bins(binNum)
  .frequency(true)
  
var hisData = histogram(dataSet)

console.log(hisData)

// -- 比例尺 --  
var xAxisWidth = width - padding.left - padding.right
var yAxisWidth = height - padding.top - padding.bottom
var xTicks = hisData.map(function(d){ return d.x })

var xScale = d3.scale.ordinal()
	.domain(xTicks)
  .rangeRoundBands([0, xAxisWidth])

var yScale = d3.scale.linear()
	.domain([d3.min(hisData, function(d){ return d.y }), d3.max(hisData, function(d){ return d.y })])
  .range([5, yAxisWidth])

// -- 刻度 --  
var xAScale = d3.scale.linear()
  .domain([rangeMin, rangeMax])
  .range([0, xAxisWidth])

var xAxis = d3.svg.axis()
	.scale(xAScale)
  .orient("bottom")
  .ticks((rangeMax - rangeMin) / binNum)

svg.append("g")
	.attr("class", "xAxis")
  .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis)

// -- 線圖 --
var lineGenerator = d3.svg.line()
	.x(function(d){ return xScale(d.x) })
  .y(function(d){ return height - yScale(d.y) })
  .interpolate("basis")
  
var gLine = svg.append("g")
	.attr("transform", "translate(" + padding.left + "," + ( -padding.bottom ) + ")")

gLine.append("path")
	.attr("class", "linePath")
  .attr("d", lineGenerator(hisData))

// -- 焦點元素 --
var focusCircle = svg.append("g")
	.attr("class", "focusCircle")
  .style("display", "none")
  
focusCircle.append("circle")
	.attr("r", 4.5)
  
focusCircle.append("text")
	.attr("dx", 10)
  .attr("dy", "1em")
  
// -- 對齊線元素 --
var focusLine = svg.append("g")
	.attr("class", "focusLine")
  .style("display", "none")
  
var vLine =...