<div class="chart"></div>

const data = [
  {
    label: "2011",
    value: 45
  },
  {
    label: "2012",
    value: 47
  },
  {
    label: "2013",
    value: 52
  }
];

const width = 500;
const height = 300;
const margin = 40;

let svg = d3
  .select(".chart") //選取要塞入圖表的tag
  .append("svg") // 塞入一個svg
  .attr("width", width) // 設定 svg 寬
  .attr("height", height) // 設定 svg 高
  .style("border", "1px solid #159");

const min = d3.min(data, (d) => d.value); // 算出最小值
const max = d3.max(data, (d) => d.value); // 算出最大值

const xScale = d3
  .scaleLinear() // 做一個線性比例尺  v3 寫法 scale.linear()
  .domain([0, max]) // 設data值的區間
  .range([margin, width - margin]) //設定自定義區域的範圍
  .nice();

const xAxis = d3
  .axisBottom(xScale) // 定義坐標軸方向
  // .ticks( Math.floor(Math.max(width/100)) )

const yScale = d3
  .scaleBand()
  .domain(data.map( d=> d.label ))
  .range([ height - margin, margin]) //反轉y軸 圖形從底部開始繪製
  .paddingInner(0.2)
  .paddingOuter(0.3)
  .round(true)

const yAxis = d3
  .axisLeft(yScale)
  // .tickSizeOuter(0)
  

svg
  .append("g")
  .attr("transform", `translate( 0, ${height - margin})`)
  .attr("class", "xaxis")
  .call(xAxis);

svg
  .append("g")
  .attr("transform", `translate( ${margin}, 0)`)
  .attr("class", "yaxis")
  .call(yAxis);


// svg.append("g").attr("class", "bars");

svg
  // .select(".bars")
  .selectAll(".bar")
  .data( data )
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("fill", "orange")
  .attr("x", `${margin}`)
  .attr("y", d => yScale(d.label))
  .attr("width", d => xScale(d.value) - margin)
  .attr("height", yScale.bandwidth());