JSFiddle - React, Tailwind, and code Playground

by cooper081

HTML

<body>

</body>

CSS

.x {
  font-size:8pt;
  /* transform: rotate(45deg); */
  text-align: center;
}

div.tooltip-donut {
     position: absolute;
     text-align: center;
     padding: .5rem;
     background: #FFFFFF;
     color: #313639;
     border: 1px solid #313639;
     border-radius: 8px;
     pointer-events: none;
     font-size: 1.3rem;
}

JavaScript

const ary = [{
    value: 900,
    name: '2022-01-01'
  },
  {
    value: 900,
    name: '2022-01-01'
  },
  {
    value: 291,
    name: '2022-01-02'
  }, {
    value: 874,
    name: '2022-01-03'
  },
  {
    value: 291,
    name: '2022-01-04'
  }
];

const width = 600,
  height = 200,
  line_Color = "red",
  line_Width = 1;

// 坐標軸位移
const coordinate_Transfer = Math.max(...ary.map(el => {
  return el.value
})).toString().length * 12

// 處理X軸日期格式
const parseTime = d3.timeFormat('%m/%d')
const newData = ary.map(data => parseTime(new Date(data.name)))

// Y座標格式
const scaleY = d3.scaleLinear()
  .domain([0, d3.max(ary.map(el => el.value))])
  .range([height - 50, 0])

// X座標格式，處理渲染 日期
const scaleX_ScalePoint = d3.scalePoint()
  .domain(newData)
  .range([coordinate_Transfer, width - 30])

// X座標格式，處理渲染 線圖
const scaleX_ScaleLinear = d3.scaleLinear()
  .domain([0, ary.length - 1])
  .range([coordinate_Transfer, width - 30])

//創建 SVG conatiner
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)


// 處理坐標軸
function coordinate() {
  const axisX = d3.axisBottom(scaleX_ScalePoint).tickValues(scaleX_ScalePoint.domain().filter((d, i) => i % 2 === 0))

  const axisY = d3.axisLeft(scaleY).ticks()
    .tickFormat(function(d) {
      return d == 0 ? d : d / 1000 + "k";
    });

  svg
    .append("g")
    .attr("transform", `translate(${coordinate_Transfer},10)`)
    .call(axisY)

  svg
    .append("g")
    .attr("transform", `translate(0,160)`)
    .call(axisX)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-45)");
}


var div = d3.select("body").append("div")
  .attr("class", "tooltip-donut")
  .style("opacity", 0);


const xx = svg.selectAll("circle")
  .data(ary)
  .join("circle")
  .attr("cx", (d, i) => {
  	console.log("123")
    console.log(scaleX_ScaleLinear(i), i)
    return scaleX_ScaleLinear(i)
  })
  .attr("cy", (d, i) => {
    return...