根據折線圖中的資料，點沒有完美放置-有解無憂

這里我面臨一些小問題線點沒有根據x軸點放置我不知道為什么點點在x點的實際值之前移動了1cm

問題 1 我們如何將點與 x 軸點精確匹配

問題 2 如何避免零位置網格線（如果 y 軸上的值為零 0，我不想顯示網格線）

我想像這樣對齊

根據折線圖中的資料，點沒有完美放置

但我得到了這樣的

根據折線圖中的資料，點沒有完美放置

在這里，當我們看到 x 軸與點位置時，我想對齊月份值和點位置必須相同

   const convertRemToPixels = (rem) => {
    return (
      rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
    );
  };
  const data = [
    { x: "Jan", y: "0.03" },
    { x: "Feb", y: "5" },
    { x: "Mar", y: "10" },
    { x: "Apr", y: "6" },
    { x: "May", y: "11" },
    { x: "Jun", y: "2" },
  ];
 const margin = { top: 10, right: 30, bottom: 30, left: 60 },
      width = 600 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

    // append the svg object to the body of the page
    const svg = d3
      .select("#mainChart")
      .attr("width", width   margin.left   margin.right)
      .attr("height", height   margin.top   margin.bottom)
      .select("#mainGroup")
      .attr("transform", `translate(${margin.left},${margin.top})`);


  let tooltip = d3
      .select("#tooltipContainer")
      .style("position", "absolute")
      .style("top", 0)
      .style("left", 0)
      .style("display", "none");

    

    // grid function
    function make_y_gridlines() {
      return d3.axisLeft(y).ticks(6);
    }

    // Add X axis --> it is a date format
    const x = d3.scaleBand().range([0, width]);

    const y = d3
      .scaleLinear()
      .domain([0, d3.max(data.map((e) => parseInt(e.y)))])
      .range([height, 0]);

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y).ticks(6);
    x.domain(
      data.map(function (d) {
        console.log(d);
        return d.x;
      })
    ).padding([0.2]);
    svg
      .select("#XAxis")
      .transition()
      .attr("transform", "translate(0,"   height   ")")
      .call(xAxis)
      .style("color", "#a4a4a4");

    svg
      .select("#XAxis")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", ".6em")
      .attr("dy", "1em")
      .style("font-size", ".8rem")
      .attr("transform", "rotate(0)")
      .style("font-family", '"Roboto", sans-serif');

    // Add Y axis

    svg
      .select("#YAxis")
      .transition()
      .call(yAxis)
      .style("color", "#a4a4a4")
      .style("font-size", ".7rem");

    svg
      .select("#linePath")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "#14c884")
      .transition()
      .attr(
        "d",
        d3
          .line()
          .x(function (d) {
            console.log(d);
            return x(d.x);
          })
          .y(function (d) {
            return y(d.y);
          })
          .curve(d3.curveCatmullRom.alpha(1.1))
      );
    const circle = d3.select("#LineDots");

    circle
      .selectAll(".point")
      .data(data)
      .join("circle")
 .on("mouseover", (e, i) => {
        d3.select(e.target).transition().attr("r", 4);

        tooltip.transition().duration(0).style("display", "block");
        tooltip
          .html(`<div>${i.x} : <span>${i.y}</span></div>`)
          .style("left", e.pageX   convertRemToPixels(-1.6)   "px")
          .style("top", e.pageY - convertRemToPixels(2)   "px");
      })
      .on("mouseout", (e) => {
        d3.select(e.target).transition().attr("r", 2);

        tooltip.transition().duration(0);
        tooltip
          .style("left", "0px")
          .style("top", "0px")
          .style("display", "none");
      })
      .transition()
      .attr("class", "point")
      .attr("stroke", "#14c884")
      .attr("fill", function (d, i) {
        return "#14c884";
      })
      .attr("cx", function (d, i) {
        return x(d.x);
      })
      .attr("cy", function (d, i) {
        console.log(d.y);
        return y(d.y);
      })
      .attr("r", function (d, i) {
        return 2;
      })
      .style("opacity", 1);
    d3.select("#Grid")
      .transition()
      .call(make_y_gridlines().tickSize(-width).tickFormat(""))
      .attr("id", "gridSystem");

#gridSystem line{
        stroke: lightgrey;
        stroke-opacity: 0.7;
        shape-rendering: crispEdges;
        stroke-dasharray: 2 2;
        stroke-width : .05rem ;
    }

   #gridSystem path {
        stroke-width: 0;
    }

/* tooltip */
.barTitle{
  text-align: center;
  font-weight: bolder;
  padding: .2em 0;
  font-size: .8rem;
  color: black;
}
#tooltipContainer div span{
  color: #536876;
  font-weight: bold;
}
.bar{
  border-top-left-radius: 1em !important;
}

#tooltipContainer {
    line-height: 1.1;
    font-weight: bold;
    padding: .6em 1em .6em 1em;
    background:white;
   
    color: #9cb3c3;
    border-radius: .4em;
    font-weight: 600;
    box-shadow: 0em 0em .5em rgb(165, 163, 163);
    font-size: .6rem;
    font-family: 'Roboto', sans-serif;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<div id="tooltipContainer"></div>
   <svg id="mainChart">
        <g id="mainGroup">
          <g id="XAxis"></g>
          <g id="YAxis"></g>
          <g id="Grid"></g>
          <path id="linePath"></path>
          <g id="LineDots"></g>
        </g>
      </svg>

這是用于修復https://codepen.io/codingdarci/pen/ZERpNOG的 codepan 源代碼

誰能給我一些建議如何解決這個問題以及如何解決這個問題

提前感謝

uj5u.com熱心網友回復：

關于圓圈的位置，您需要點比例而不是波段比例，因為波段比例具有相關的帶寬：

const x = d3.scalePoint().range([0, width]);

對于 y 軸，只需洗掉零的刻度：

axis.selectAll(".tick")
.filter(d => d === 0)
.remove();

這是您進行這些更改的代碼：

顯示代碼片段

const convertRemToPixels = (rem) => {
  return (
    rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
  );
};
const data = [{
    x: "Jan",
    y: "0.03"
  },
  {
    x: "Feb",
    y: "5"
  },
  {
    x: "Mar",
    y: "10"
  },
  {
    x: "Apr",
    y: "6"
  },
  {
    x: "May",
    y: "11"
  },
  {
    x: "Jun",
    y: "2"
  },
];
const margin = {
    top: 10,
    right: 30,
    bottom: 30,
    left: 60
  },
  width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3
  .select("#mainChart")
  .attr("width", width   margin.left   margin.right)
  .attr("height", height   margin.top   margin.bottom)
  .select("#mainGroup")
  .attr("transform", `translate(${margin.left},${margin.top})`);


let tooltip = d3
  .select("#tooltipContainer")
  .style("position", "absolute")
  .style("top", 0)
  .style("left", 0)
  .style("display", "none");



// grid function
function make_y_gridlines() {
  return d3.axisLeft(y).ticks(6);
}

// Add X axis --> it is a date format
const x = d3.scalePoint().range([0, width]);

const y = d3
  .scaleLinear()
  .domain([0, d3.max(data.map((e) => parseInt(e.y)))])
  .range([height, 0]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y).ticks(6);
x.domain(
  data.map(function(d) {
    console.log(d);
    return d.x;
  })
).padding([0.2]);
svg
  .select("#XAxis")
  .transition()
  .attr("transform", "translate(0,"   height   ")")
  .call(xAxis)
  .style("color", "#a4a4a4");

svg
  .select("#XAxis")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", ".6em")
  .attr("dy", "1em")
  .style("font-size", ".8rem")
  .attr("transform", "rotate(0)")
  .style("font-family", '"Roboto", sans-serif');

// Add Y axis

svg
  .select("#YAxis")
  .transition()
  .call(yAxis)
  .style("color", "#a4a4a4")
  .style("font-size", ".7rem")
  .selectAll(".tick")
  .filter(d => d === 0)
  .remove();

svg
  .select("#linePath")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "#14c884")
  .transition()
  .attr(
    "d",
    d3
    .line()
    .x(function(d) {
      console.log(d);
      return x(d.x);
    })
    .y(function(d) {
      return y(d.y);
    })
    .curve(d3.curveCatmullRom.alpha(1.1))
  );
const circle = d3.select("#LineDots");

circle
  .selectAll(".point")
  .data(data)
  .join("circle")
  .on("mouseover", (e, i) => {
    d3.select(e.target).transition().attr("r", 4);

    tooltip.transition().duration(0).style("display", "block");
    tooltip
      .html(`<div>${i.x} : <span>${i.y}</span></div>`)
      .style("left", e.pageX   convertRemToPixels(-1.6)   "px")
      .style("top", e.pageY - convertRemToPixels(2)   "px");
  })
  .on("mouseout", (e) => {
    d3.select(e.target).transition().attr("r", 2);

    tooltip.transition().duration(0);
    tooltip
      .style("left", "0px")
      .style("top", "0px")
      .style("display", "none");
  })
  .transition()
  .attr("class", "point")
  .attr("stroke", "#14c884")
  .attr("fill", function(d, i) {
    return "#14c884";
  })
  .attr("cx", function(d, i) {
    return x(d.x);
  })
  .attr("cy", function(d, i) {
    console.log(d.y);
    return y(d.y);
  })
  .attr("r", function(d, i) {
    return 2;
  })
  .style("opacity", 1);
d3.select("#Grid")
  .transition()
  .call(make_y_gridlines().tickSize(-width).tickFormat(""))
  .attr("id", "gridSystem")
  .selectAll(".tick")
  .filter(d => d === 0)
  .remove();

#gridSystem line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
  stroke-dasharray: 2 2;
  stroke-width: .05rem;
}

#gridSystem path {
  stroke-width: 0;
}


/* tooltip */

.barTitle {
  text-align: center;
  font-weight: bolder;
  padding: .2em 0;
  font-size: .8rem;
  color: black;
}

#tooltipContainer div span {
  color: #536876;
  font-weight: bold;
}

.bar {
  border-top-left-radius: 1em !important;
}

#tooltipContainer {
  line-height: 1.1;
  font-weight: bold;
  padding: .6em 1em .6em 1em;
  background: white;
  color: #9cb3c3;
  border-radius: .4em;
  font-weight: 600;
  box-shadow: 0em 0em .5em rgb(165, 163, 163);
  font-size: .6rem;
  font-family: 'Roboto', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<div id="tooltipContainer"></div>
<svg id="mainChart">
        <g id="mainGroup">
          <g id="XAxis"></g>
          <g id="YAxis"></g>
          <g id="Grid"></g>
          <path id="linePath"></path>
          <g id="LineDots"></g>
        </g>
      </svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/528786.html

標籤：javascript反应d3.js折线图

上一篇：如何在回圈中命令Ajax呼叫

下一篇：如何繪制閉合曲線？