Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/437.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在react中显示两个节点之间的标签?_Javascript_Reactjs - Fatal编程技术网

Javascript 如何在react中显示两个节点之间的标签?

Javascript 如何在react中显示两个节点之间的标签?,javascript,reactjs,Javascript,Reactjs,我正在使用下面的软件包 我的问题是我的标签在两个节点之间没有显示为什么 这是我的密码 const data = { nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }], links: [ { source: "Harry", target: "Sally", label: "dddddds" }, { source: "Harry", target: "Alice", label: "dddddds" }

我正在使用下面的软件包

我的问题是我的标签在两个节点之间没有显示为什么

这是我的密码

const data = {
  nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
  links: [
    { source: "Harry", target: "Sally", label: "dddddds" },
    { source: "Harry", target: "Alice", label: "dddddds" }
  ]
};
我们可以增加初始缩放级别吗?

您需要将labelProperty添加到配置中以显示标签。您可以像这样向labelProperty提供目标/源/标签

我们可以增加初始缩放级别吗

不,还没有。查看

jsx

const myConfig = {
  nodeHighlightBehavior: true,
  maxZoom: 3,
  minZoom: 1,
  node: {
    color: "lightgreen",
    size: 300,
    highlightStrokeColor: "blue",
    labelProperty: "id",
    symbolType: "circle"
  },
  link: {
    highlightColor: "lightblue",
    renderLabel: true,
    labelProperty: "target"
  }
};
// graph payload (with minimalist structure)
const data = {
  nodes: [
    {
      id: "Harry",
      symbolType: "diamond",
      color: "red",
      size: 300
    },
    { id: "Sally" },
    { id: "Alice" }
  ],
  links: [
    { source: "Harry", target: "Sally", label: "dddddds" },
    { source: "Harry", target: "Alice", label: "dddddds" }
  ]
};

// the graph configuration, you only need to pass down properties
// that you want to override, otherwise default ones will be used
const myConfig = {
  nodeHighlightBehavior: true,
  maxZoom: 3,
  minZoom: 1,
  node: {
    color: "lightgreen",
    size: 300,
    highlightStrokeColor: "blue",
    labelProperty: "id",
    symbolType: "circle"
  },
  link: {
    highlightColor: "lightblue",
    renderLabel: true,
    labelProperty: "source"
  }
};

function App() {
  return (
    <div className="App">
      <Graph
        id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
        data={data}
        config={myConfig}
      />
      ;
    </div>
  );
}