Javascript 使用可变标度时，使用React和D3分离关注点

我一直在关注这些问题，并将它们分为不同的文件。这个想法是，您的模块在

可视化

文件夹中处理D3属性

在我的示例中，文件

visualization/node.js

负责为表示数据集的循环节点设置属性。它们的位置应该基于它们的值属性和一个可变尺度，该尺度在数据值的范围内设置了一个域

scale本身是在加载数据的父组件中创建的，因此我看不到任何将其“传递”到

nodeViz的方法。在设置节点属性（包括其位置）的位置创建
。我也不相信该函数/模块知道数据集是否允许在
node.js
文件中重新创建刻度

当使用诸如标尺之类的工具来定位元素时，有没有办法实现这种分离？我觉得我一定错过了什么

可以，但代码也如下所示：

Chart.js

import React from "react";

import { extent, scaleLinear, select } from "d3";
import nodeViz from "./visualisation/node";

const width = 800;
const height = 500;

class Chart extends React.Component {
  data = [
    { id: 0, value: 4 },
    { id: 1, value: 0 },
    { id: 2, value: 7 },
    { id: 3, value: 5 },
    { id: 4, value: 2 }
  ];

  xScale = scaleLinear()
    .range([0, width])
    .domain(extent(this.data.map(d => d.value)));

  createChart = () => {
    // The following would normally happen on componentDidUpdate
    // when we have some new data via the props, but in this
    // case we're not async so the data will already exist.
    const svg = select(this.node);

    const nodes = svg.selectAll("circle").data(this.data, d => d.id);

    nodes.enter().call(nodeViz.create);
    nodes.exit().remove();
  };

  componentDidMount() {
    this.createChart();
  }

  render() {
    return (
      <svg ref={node => (this.node = node)} width={width} height={height}>
        <g />
      </svg>
    );
  }
}

export default Chart;

const create = selection => {
  return selection
    .append("circle")
    .attr("r", 3)
    .merge(selection)
    .attr("fill", "red")
    .attr("cx", d => d.value) // Should be xScale(d.value)
    .attr("cy", 150);
};

export default {
  create
};

老实说，我写那篇文章已经很多年了，实际上我有了一些新的观点（尽管核心概念保持不变）。在这种情况下，属性设置被分离出来，以便能够使用d3进行过渡/动画等操作（bc d3需要直接操作DOM，因此我们不希望react跟踪它）。在我看来，比例是数据计算和渲染的分离，在这种情况下，我会在渲染阶段之前进行数据计算。所以在这个例子中，数据计算和渲染

如果我现在要做的话，我可能会让React渲染所有东西（包括属性）或者让D3渲染所有东西（所以输入updateexit everything）。我在中谈到了这一点。
老实说，我写那篇文章已经很多年了，实际上我有了一些新的观点（尽管核心概念保持不变）。在这种情况下，属性设置被分离出来，以便能够使用d3进行过渡/动画等操作（bc d3需要直接操作DOM，因此我们不希望react跟踪它）。在我看来，比例是数据计算和渲染的分离，在这种情况下，我会在渲染阶段之前进行数据计算。所以在这个例子中，数据计算和渲染

如果我现在要做的话，我可能会让React渲染所有东西（包括属性）或者让D3渲染所有东西（所以输入updateexit everything）。我在中讨论了这一点。
很有趣，知道你实际上会在其中一个中进行，而不会混合。我得去听那个演讲了！有趣的是，你实际上会在一个或另一个没有混合的情况下做。我得去听那个演讲了！