Published
Edited
Jul 6, 2019
md`# 小汽车`
{
let height = 300
let svg = d3.select(DOM.svg(width, height))
let margin = { left: 40, top: 10, bottom: 30, right: 50 }
let root = svg.append('g').attr('class', 'root-group').attr('transform', `translate(${margin.left},${margin.top})`)
let w = width - margin.left - margin.right
let h = height - margin.top - margin.bottom
let x = d3.scaleBand().range([0, w]).domain(data.map(d => d.date)).padding(.3)
let y = d3.scaleLinear().range([h, 0]).domain([10000, d3.max(data, d => d.priceAverage)])
let ly = d3.scaleLinear().range([h, 0]).domain([0, d3.max(data, d => d.validCode)])
let rectG = root.append('g').attr('class', 'rect-g')
rectG.selectAll('rect').data(data)
.enter().append('rect')
.attr('width', x.bandwidth())
.attr('x', d => x(d.date))
.attr('y', d => y(d.priceAverage))
.attr('height', d => y(d.priceMin) - y(d.priceAverage))
.attr('fill', '#2ba0cd')
let pathdatas = [
data.map(d => ({color: 'red', date: d.date, data: d.avalible})),
data.map(d => ({color: 'green', date: d.date, data: d.validCode})),
]
let line = d3.line().x((d, i) => x(d.date) + x.bandwidth()/2).y(d => ly(d.data))
let lineG = root.append('g').attr('class', 'line-g')
lineG.selectAll('path').data(pathdatas)
.enter().append('path')
.attr('d', line)
.attr('stroke', d => d[0].color)
.attr('fill', 'none')
// axis
let axisG = root.append('g').attr('class', 'axis-g')
axisG.append('g').attr('class', 'left').call(d3.axisLeft(y))
axisG.append('g').attr('class', 'right').attr('transform', `translate(${w},0)`).call(d3.axisRight(ly))
axisG.append('g').attr('class', 'bottom').attr('transform', `translate(0,${h})`).call(
d3.axisBottom(x).tickFormat((d, i) => {
let fields = d.split('-')
if (fields[1] == '1') return fields[0]
return fields[1]
})
).selectAll('text').attr('transform', 'rotate(-45)').attr('x', -8).attr('y', 5)
return svg.node()
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
