绘制线性图后 x 轴线消失

Question

我正在使用 React 和 React hooks 制作的 Web 应用程序中创建一个绘图。该图是使用 d3.js 库绘制的。该图显示完美，但当我绘制线图时，x 轴线消失。

第一个图由一组点组成。该图突出显示了折线图所基于的点。第二张图是折线图。

const useState = React.useState;

const useRef = React.useRef;

const useEffect = React.useEffect;

const select = d3.select;

const scaleLinear = d3.scaleLinear;

const axisBottom = d3.axisBottom;

const axisLeft = d3.axisLeft;

const line = d3.line;

const curveCardinal = d3.curveCardinal;

const DummyPlot = () => {

  const [xAxisData] = useState({

    min: 0,

    max: 16

  });

  const [yAxisData] = useState({

    min: 1000,

    max: 1500

  });

  const [colorPalette] = useState({

    dots: "#1E90FF",

    line: "#8A2BE2"

  });

  const [meta] = useState({

    xWidth: 600,

    yWidth: 300,

    lineStroke: "3px",

    pointRadius: "4px"

  });

  const [points] = useState([{

      y: 1425,

      x: 1

    },

    {

      y: 1435,

      x: 2

    },

    {

      y: 1445,

      x: 3

    },

    {

      y: 1455,

      x: 4

    },

    {

      y: 1455,

      x: 5

    },

    {

      y: 1455,

      x: 6

    },

    {

      y: 1425,

      x: 7

    },

    {

      y: 1125,

      x: 8

    },

    {

      y: 1090,

      x: 9

    },

    {

      y: 1090,

      x: 10

    },

    {

      y: 1250,

      x: 11

    },

    {

      y: 1350,

      x: 12

    },

    {

      y: 1035,

      x: 13

    },

    {

      y: 1150,

      x: 14

    },

    {

      y: 1100,

      x: 15

    }

  ]);

  const svgRef = useRef();

  useEffect(() => {

    if (svgRef.current) {

      const svg = select(svgRef.current);

      // X-AXIS

      const xScale = scaleLinear()

        .domain([xAxisData.min, xAxisData.max])

        .range([0, meta.xWidth]);

      const xAxis = axisBottom(xScale);

      svg

        .select(".x-axis")

        .style("transform", `translateY(${meta.yWidth}px)`)

        .call(xAxis);

      // Y-AXIS

      const yScale = scaleLinear()

        .domain([yAxisData.min, yAxisData.max])

        .range([meta.yWidth, 0]);

      const yAxis = axisLeft(yScale);

      svg

        .select(".y-axis")

        .call(yAxis);

Answer 1

通过使用svg.select("path")，您将轴域重新path用作图表的一条线。添加一个单独的path节点，并给它一个类名，修复它：现在也不再需要yWidth从 y 值中减去，这是因为transform底部轴上的 。const useState = React.useState;const useRef = React.useRef;const useEffect = React.useEffect;const select = d3.select;const scaleLinear = d3.scaleLinear;const axisBottom = d3.axisBottom;const axisLeft = d3.axisLeft;const line = d3.line;const curveCardinal = d3.curveCardinal;const DummyPlot = () => {&nbsp; const [xAxisData] = useState({&nbsp; &nbsp; min: 0,&nbsp; &nbsp; max: 16&nbsp; });&nbsp; const [yAxisData] = useState({&nbsp; &nbsp; min: 1000,&nbsp; &nbsp; max: 1500&nbsp; });&nbsp; const [colorPalette] = useState({&nbsp; &nbsp; dots: "#1E90FF",&nbsp; &nbsp; line: "#8A2BE2"&nbsp; });&nbsp; const [meta] = useState({&nbsp; &nbsp; xWidth: 600,&nbsp; &nbsp; yWidth: 300,&nbsp; &nbsp; lineStroke: "3px",&nbsp; &nbsp; pointRadius: "4px"&nbsp; });&nbsp; const [points] = useState([{&nbsp; &nbsp; &nbsp; y: 1425,&nbsp; &nbsp; &nbsp; x: 1&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1435,&nbsp; &nbsp; &nbsp; x: 2&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1445,&nbsp; &nbsp; &nbsp; x: 3&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1455,&nbsp; &nbsp; &nbsp; x: 4&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1455,&nbsp; &nbsp; &nbsp; x: 5&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1455,&nbsp; &nbsp; &nbsp; x: 6&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1425,&nbsp; &nbsp; &nbsp; x: 7&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1125,&nbsp; &nbsp; &nbsp; x: 8&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1090,&nbsp; &nbsp; &nbsp; x: 9&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1090,&nbsp; &nbsp; &nbsp; x: 10&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1250,&nbsp; &nbsp; &nbsp; x: 11&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1350,&nbsp; &nbsp; &nbsp; x: 12&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1035,&nbsp; &nbsp; &nbsp; x: 13&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1150,&nbsp; &nbsp; &nbsp; x: 14&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; y: 1100,&nbsp; &nbsp; &nbsp; x: 15&nbsp; &nbsp; }&nbsp; ]);&nbsp; const svgRef = useRef();&nbsp; useEffect(() => {&nbsp; &nbsp; if (svgRef.current) {&nbsp; &nbsp; &nbsp; const svg = select(svgRef.current);&nbsp; &nbsp; &nbsp; // X-AXIS&nbsp; &nbsp; &nbsp; const xScale = scaleLinear()&nbsp; &nbsp; &nbsp; &nbsp; .domain([xAxisData.min, xAxisData.max])&nbsp; &nbsp; &nbsp; &nbsp; .range([0, meta.xWidth]);&nbsp; &nbsp; &nbsp; const xAxis = axisBottom(xScale);&nbsp; &nbsp; &nbsp; svg&nbsp; &nbsp; &nbsp; &nbsp; .select(".x-axis")&nbsp; &nbsp; &nbsp; &nbsp; .style("transform", `translateY(${meta.yWidth}px)`)&nbsp; &nbsp; &nbsp; &nbsp; .call(xAxis);&nbsp; &nbsp; &nbsp; // Y-AXIS&nbsp; &nbsp; &nbsp; const yScale = scaleLinear()&nbsp; &nbsp; &nbsp; &nbsp; .domain([yAxisData.min, yAxisData.max])&nbsp; &nbsp; &nbsp; &nbsp; .range([meta.yWidth, 0]);&nbsp; &nbsp; &nbsp; const yAxis = axisLeft(yScale);&nbsp; &nbsp; &nbsp; svg&nbsp; &nbsp; &nbsp; &nbsp; .select(".y-axis")&nbsp; &nbsp; &nbsp; &nbsp; .call(yAxis);&nbsp; &nbsp; &nbsp; // LINE PLOT&nbsp; &nbsp; &nbsp; const myLine = line()&nbsp; &nbsp; &nbsp; &nbsp; .x(value => xScale(value.x))&nbsp; &nbsp; &nbsp; &nbsp; .y(value => yScale(value.y))&nbsp; &nbsp; &nbsp; &nbsp; .curve(curveCardinal);&nbsp; &nbsp; &nbsp; svg&nbsp; &nbsp; &nbsp; &nbsp; .selectAll(".line")&nbsp; &nbsp; &nbsp; &nbsp; .data([points])&nbsp; &nbsp; &nbsp; &nbsp; .join(".line")&nbsp; &nbsp; &nbsp; &nbsp; .attr("d", value => myLine(value))&nbsp; &nbsp; &nbsp; &nbsp; .attr("fill", "none")&nbsp; &nbsp; &nbsp; &nbsp; .attr("stroke", colorPalette.line)&nbsp; &nbsp; &nbsp; &nbsp; .attr("stroke-width", meta.lineStroke);&nbsp; &nbsp; &nbsp; // DOT PLOT&nbsp; &nbsp; &nbsp; svg&nbsp; &nbsp; &nbsp; &nbsp; .selectAll("circle")&nbsp; &nbsp; &nbsp; &nbsp; .data(points)&nbsp; &nbsp; &nbsp; &nbsp; .join("circle")&nbsp; &nbsp; &nbsp; &nbsp; .attr("cx", value => xScale(value.x))&nbsp; &nbsp; &nbsp; &nbsp; .attr("cy", value => yScale(value.y))&nbsp; &nbsp; &nbsp; &nbsp; .attr("r", () => meta.pointRadius)&nbsp; &nbsp; &nbsp; &nbsp; .attr("fill", () => colorPalette.dots)&nbsp; &nbsp; &nbsp; &nbsp; .attr("stroke", () => colorPalette.dots);&nbsp; &nbsp; }&nbsp; }, [xAxisData, yAxisData, meta, points, colorPalette]);&nbsp; return ( <&nbsp; &nbsp; svg viewBox={`0 0 ${meta.xWidth} ${meta.yWidth}`}&nbsp; &nbsp; &nbsp; &nbsp; ref = {svgRef} >&nbsp; &nbsp; &nbsp; <g className = "x-axis" / >&nbsp; &nbsp; &nbsp; <g className = "y-axis" / >&nbsp; &nbsp; &nbsp; <path className = "line" / >&nbsp; &nbsp; </svg>&nbsp; );}ReactDOM.render(< DummyPlot />, document.querySelector("body"));svg {&nbsp; width: 80%;&nbsp; height: auto;&nbsp; background: #eee;&nbsp; overflow: visible;&nbsp; margin: 5%;}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>