程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使 react-D3-library 可拖动?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决如何使 react-D3-library 可拖动??

开发过程中遇到如何使 react-D3-library 可拖动?的问题如何解决?下面主要结合日常开发的经验,给出你关于如何使 react-D3-library 可拖动?的解决方法建议,希望对你解决如何使 react-D3-library 可拖动?有所启发或帮助;

我正在尝试使我的 D3 图表可拖动,但是当我拖动应用程序时崩溃了。

使用 d3-3d 使其拖动。

错误:

如何使 react-D3-library 可拖动?

代码:

let sum;

      var j = 10,scale = 8,scatter = [],xline = [],yline = [],zline = [],beta = 0,Alpha = 0,key = function (d) {
          return d.ID;
        },startAngle = Math.PI / 4,h = 300,w = 367,BACkgroundDots = [];
      var origin = [w * 0.4,h / 2];
      var svg = d3
        .SELEct(nodE)
        .append("svg")
        .attr("class","nnsContainer")
        .attr("wIDth",w)
        .attr("height",h)
        .on("mouSEOver",hoverStart)
        .on("mouSEOut",hoverEnd)
        .call(
          d3.drag()
            .on("drag",(event) => dragged(event))
            .on("start",(event) =>  dragStart(event))
            .on("end",(event) => dragend(event))
        )
        .append("g");
      var mx,my,mouseX,mouseY;

      var borderPath = svg
        .append("rect")
        .attr("x",0)
        .attr("y",0)
        .attr("height",h)
        .attr("wIDth",w)
        .style("stroke","black")
        .style("fill","none")
        .style("stroke-wIDth",0.3);

      // center origin at target word or centroID of points
      var center;
      if (!this.state.query_word) {
        center = {};
        for (const dim of ["x","y","z"]) {
          sum = radarChartData.querY[dim];
          for (const nn of radarChartData.neighbors) {
            sum += nn[dim];
          }
          center[dim] = sum / (radarChartData.neighbors.length + 1);
        }
      } else {
        center = {
          x: radarChartData.query.x,y: radarChartData.query.y,z: radarChartData.query.z,};
      }
      for (const dim of ["x","z"]) {
        radarChartData.querY[dim] -= center[dim];
        for (var i = 0; i < radarChartData.neighbors.length; i++) {
          radarChartData.neighbors[i][dim] -= center[dim];
        }
      }

      var cursorStatus = {
        hovering: false,dragging: false,};
      var cursorupdate = function (cursorStatus) {
        if (cursorStatus.dragging) {
          document.querySELEctor("HTML,body").style.cursor = "grabbing";
        } else if (cursorStatus.hovering) {
          document.querySELEctor("HTML,body").style.cursor = "grab";
        } else {
          document.querySELEctor("HTML,body").style.cursor = "auto";
        }
      };

      // scale zoom level for size of viz,and range of data
      var query_magnitude = Math.sqrt(
        this.state.radarChartData.query.x ** 2 +
          this.state.radarChartData.query.y ** 2 +
          this.state.radarChartData.query.z ** 2
      );
      var mag_max = query_magnitude;
      for (var i = 0; i < this.state.radarChartData.neighbors.length; i++) {
        var pt = this.state.radarChartData.neighbors[i];
        var magnitude = Math.sqrt(pt.x ** 2 + pt.y ** 2 + pt.z ** 2);
        if (magnitude > mag_maX) {
          mag_max = magnitude;
        }
      }
      var zoom_scale = d3.scalelinear().domain([100,300]).range([50,150]);
      scale = zoom_scale(h) / mag_max;

      // scale dots & labels for size of viz and distance from camera
      var minFontScale = d3.scalelinear().domain([80,160]).range([7,10]);
      minFontScale.clamp(true);
      var maxFontScale = d3.scalelinear().domain([80,208]).range([11,19]);
      maxFontScale.clamp(true);
      var zToFont = d3
        .scalelinear()
        .domain([-mag_max,mag_max])
        .range([minFontScale(h),maxFontScale(h)]);
      // 100 is just arbitrary high val,we just need to clamp min size
      var positive = d3.scalelinear().domain([0.5,100]).range([0.5,100]);
      positive.clamp(true);
      var FontSize = function (d) {
        return positive(zToFont(d.rotated.z));
      };
      var pointSize = function (d) {
        return FontSize(d) / 3;
      };


      var point3d = _3d()
        .x(function (d) {
          return d.x;
        })
        .y(function (d) {
          return d.y;
        })
        .z(function (d) {
          return d.z;
        })
        .origin(origin)
        .rotateY(startAnglE)
        .rotateX(-startAnglE)
        .scale(scalE);

      var yScale3d = _3d()
        .shape("liNE_StriP")
        .origin(origin)
        .rotateY(startAnglE)
        .rotateX(-startAnglE)
        .scale(scalE);


      function processData(data,tt) {
        console.log(data)

        /* ----------- POINTS ----------- */

        var points = svg.SELEctAll("circle.main").data(data[0],key);

        points
          .enter()
          .append("circle")
          .attr("class","_3d main")
          .attr("opacity",0)
          .attr("cx",pos@R_894_7616@)
          .attr("cy",pospointy)
          .merge(points)
          .attr("r",function (d) {
            return pointSize(d) + "px";
          })
          .style("fill",function (d) {
            if (d.ID == "point_0") {
              return "#8525e5";
            } else {
              return "#4e3864";
            }
          })
          .attr("opacity",0.7)
          .attr("cx",pospointy);

        points.exit().remove();

        /* ----------- GRAY BG POINTS ----------- */

        var pointsBG = svg.SELEctAll("circle.bg").data(data[4],key);

        pointsBG
          .enter()
          .append("circle")
          .attr("class","_3d bg")
          .attr("opacity",pospointy)
          .merge(pointsBG)
          .attr("r",function (d) {
            return pointSize(d) + "px";
          })
          .attr("fill","#4e3864")
          // disappear the points if they're closer than origin
          .attr("opacity",function (d) {
            if (d.rotated.z < 0) {
              return 0.25;
            } else {
              return 0;
            }
          })
          .attr("cx",pospointy);

        pointsBG.exit().remove();

        /* ----------- POINT TEXT ----------- */

        var pointText = svg.SELEctAll("g.pointText").data(data[0]);

        pointText
          .enter()
          .append("g")
          .attr("class","_3d pointText")
          .merge(pointText)
          .attr("transform",function (d) {
            return "translate(" + d.projected.x + "," + d.projected.y + ")";
          })
          .SELEctAll("*")
          .remove();

        pointText
          .append("text")
          .attr("dx",function (d) {
            return pointSize(d) * 1.2 + "px";
          })
          .attr("dy",function (d) {
            return pointSize(d) * 1.2 + "px";
          })
          .attr("class","shadow")
          .text(function (d) {
            return d.label;
          })
          .attr("Font-size",function (d) {
            return FontSize(d) + "px";
          });

        pointText
          .append("text")
          .attr("dx",function (d) {
            return pointSize(d) * 1.2 + "px";
          })
          .text(function (d) {
            return d.label;
          })
          .attr("Font-size",function (d) {
            return FontSize(d) + "px";
          })
          .style("fill","#fff");

        pointText.exit().remove();

        /* ----------- x-Scale ----------- */

        var xScale = svg.SELEctAll("path.xScale").data(data[1]);

        xScale
          .enter()
          .append("path")
          .attr("class","_3d xScale")
          .merge(xScalE)
          .attr("stroke","red")
          .attr("stroke-wIDth",0.75)
          .attr("opacity",0.5)
          .attr("d",yScale3d.draw);

        xScale.exit().remove();

        /* ----------- y-Scale ----------- */

        var yScale = svg.SELEctAll("path.yScale").data(data[2]);

        yScale
          .enter()
          .append("path")
          .attr("class","_3d yScale")
          .merge(yScalE)
          .attr("stroke","green")
          .attr("stroke-wIDth",yScale3d.draw);

        yScale.exit().remove();

        /* ----------- z-Scale ----------- */

        var zScale = svg.SELEctAll("path.zScale").data(data[3]);

        zScale
          .enter()
          .append("path")
          .attr("class","_3d zScale")
          .merge(zScalE)
          .attr("stroke","blue")
          .attr("stroke-wIDth",yScale3d.draw);

        zScale.exit().remove();

        svg.SELEctAll("._3d").sort(_3d().sort);
      }

      function pos@R_894_7616@(d) {
        return d.projected.x;
      }

      function pospointy(d) {
        return d.projected.y;
      }

      function init() {
        var cnt = 0,yline = [];

        console.log(radarChartData,"init2");

        scatter.push({
          x: radarChartData.query.x,label: radarChartData.query.word,ID: "point_0",});

        for (var i = 0; i < radarChartData.neighbors.length; i++) {
          scatter.push({
            x: radarChartData.neighbors[i].x,y: radarChartData.neighbors[i].y,z: radarChartData.neighbors[i].z,label: radarChartData.neighbors[i].word,ID: "point_" + (i + 1),});
        }

        BACkgroundDots = [];

        function BACkgroundDotRange() {
          return (Math.random() * mag_max * 2 - mag_maX) * 4;
        }

        for (var i = 0; i < 10; i++) {
          BACkgroundDots.push({
            x: BACkgroundDotRange(),y: BACkgroundDotRange(),z: BACkgroundDotRange(),});
        }

        xline = [
          [0,0],[j,];
        yline = [
          [0,[0,-j,];
        zline = [
          [0,j],];

        var data = [
          point3d(scatter),yScale3d([xline]),yScale3d([yline]),yScale3d([zline]),point3d(BACkgroundDots),];

        processData(data,1000);
        processData(data,1000);
        // text wasn't appearing until dragged,so added this extra rotate
        point3d.rotateY(startAnglE).rotateX(startAnglE)(scatter);
      }

      function hoverStart() {
        cursorStatus.hovering = true;
        cursorupdate(cursorStatus);
      }

      function hoverEnd() {
        cursorStatus.hovering = false;
        cursorupdate(cursorStatus);
      }

      function dragStart(event) {
        mx = d3.event.x;
        my = d3.event.y;
        console.log(event,'event1')
        cursorStatus.dragging = true;
        cursorupdate(cursorStatus);
      }

      function dragged(event) {
        let mouseX = mouseX || 0;
        let mouseY = mouseY || 0;
        let beta = ((d3.event.x - mx + mouseX) * Math.PI) / 230;
        let Alpha = (((d3.event.y - my + mouseY) * Math.PI) / 230) * -1;
        console.log(beta,Alpha)
        var data = [
          point3d.rotateY(beta + startAnglE).rotateX(Alpha - startAnglE)(scatter),yScale3d.rotateY(beta + startAnglE).rotateX(Alpha - startAnglE)([xline]),yScale3d.rotateY(beta + startAnglE).rotateX(Alpha - startAnglE)([yline]),yScale3d.rotateY(beta + startAnglE).rotateX(Alpha - startAnglE)([zline]),point3d.rotateY(beta + startAnglE).rotateX(Alpha - startAnglE)(BACkgroundDots)
        ];
        processData(data,0);
      }

      function dragend(event) {
        mouseX = d3.event.x - mx + mouseX;
        mouseY = d3.event.y - my + mouseY;
        cursorStatus.dragging = false;
        cursorupdate(cursorStatus);
      }

      init();

向组件添加图表:<RD3Component data={this.state.d3} />

我猜问题与 React 有关,因为我正在传输纯 Js 代码,效果很好。

也许有人遇到过上述问题?

版本:

  • D3 4.0.0
  • 反应 16
  • React-D3-library 1.1.8

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

大佬总结

以上是大佬教程为你收集整理的如何使 react-D3-library 可拖动?全部内容,希望文章能够帮你解决如何使 react-D3-library 可拖动?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。