第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

繪制線性圖后 x 軸線消失

繪制線性圖后 x 軸線消失

守著一只汪 2023-07-14 14:51:33
我正在使用 React 和 React hooks 制作的 Web 應(yīng)用程序中創(chuàng)建一個繪圖。該圖是使用 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);
查看完整描述

1 回答

?
夢里花落0921

TA貢獻1772條經(jīng)驗 獲得超6個贊

通過使用svg.select("path")，您將軸域重新path用作圖表的一條線。添加一個單獨的path節(jié)點，并給它一個類名，修復(fù)它：


現(xiàn)在也不再需要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 = () => {


  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);


      // LINE PLOT

      const myLine = line()

        .x(value => xScale(value.x))

        .y(value => yScale(value.y))

        .curve(curveCardinal);


      svg

        .selectAll(".line")

        .data([points])

        .join(".line")

        .attr("d", value => myLine(value))

        .attr("fill", "none")

        .attr("stroke", colorPalette.line)

        .attr("stroke-width", meta.lineStroke);


      // DOT PLOT

      svg

        .selectAll("circle")

        .data(points)

        .join("circle")

        .attr("cx", value => xScale(value.x))

        .attr("cy", value => yScale(value.y))

        .attr("r", () => meta.pointRadius)

        .attr("fill", () => colorPalette.dots)

        .attr("stroke", () => colorPalette.dots);

    }


  }, [xAxisData, yAxisData, meta, points, colorPalette]);


  return ( <

    svg viewBox={`0 0 ${meta.xWidth} ${meta.yWidth}`}

        ref = {svgRef} >

      <g className = "x-axis" / >

      <g className = "y-axis" / >

      <path className = "line" / >

    </svg>

  );

}


ReactDOM.render(< DummyPlot />, document.querySelector("body"));

svg {

  width: 80%;

  height: auto;

  background: #eee;

  overflow: visible;

  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>


查看完整回答
反對 回復(fù) 2023-07-14
  • 1 回答
  • 0 關(guān)注
  • 136 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號