小编Vin*_*ent的帖子

我有一个包含多个对象的数组.这些对象还包含如下对象的数组:

const data =
    [
        {
            id: 1, name: "Jack", interests: 
            [
                {id: 9, name: "basketball"},
                {id: 8, name: "art"}
            ]
        },
        {
            id: 2, name: "Jenny", interests: 
            [
                {id: 7, name: "reading"},
                {id: 6, name: "running"}
            ]
        }
    ];

我想将两个兴趣数组推入一个新的数组,如下所示:

newArray = 
    [
        [{id: 9, name: "basketball"}, {id: 8, name: "art"}],
        [{id: 7, name: "reading"},{id: 6, name: "running"}]
    ];

这会将数据推送到新数组,但数据不会以这种方式嵌套:

data.map(v => { v.interests.map(x => { newArray.push({name: x.name, id:x.id}) }) })

如何在保持嵌套结构的同时将兴趣数据推送到新阵列？

我一直试图在React中制作一个可拖动的d3力布局一段时间了.React必须能够与图中的节点进行交互.例如,当您单击节点时,React应该能够返回节点的id onClick.

我根据Shirley Wu的一个例子制作了4个组件.一个App组件,用于保存图形数据的状态并呈现Graph组件.图形组件呈现节点和链接组件.这样,可点击节点部分就可以解决了.

当页面呈现时,节点将只能拖动几秒钟.渲染页面后,您可以立即拖动节点,然后突然,被拖动的节点完全停在一个位置.此时,其他节点也不能再被拖动.我希望能够随时拖动节点.

我可以在网上找到一些关于在图形后面创建画布,设置填充和指针事件的提示.关于letting或d3或React进行渲染和计算的讨论也很多.我尝试使用React的所有生命周期方法,但我无法使用它.

你可以在这里找到一个实时样本:https://codepen.io/vialito/pen/WMKwEr

请记住,圈子只能点击几秒钟.然后他们会留在同一个地方.所有浏览器和每次刷新后的行为都是相同的.当您记录拖动功能时,您会看到它在拖动时会分配新的坐标,但圆圈不会显示在它的新位置.

我非常渴望了解这个问题的原因,如果你甚至可以提出解决方案,那将是非常酷的.

App.js

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      data : {"nodes":
        [
          {"name": "fruit", "id": 1},
          {"name": "apple", "id": 2},
          {"name": "orange", "id": 3},
          {"name": "banana", "id": 4}
        ],
      "links": 
        [
          {"source": 1, "target": 2},
          {"source": 1, "target": 3}
        ]
      }
    }
  }

  render() {
    return (
            <div className="graphContainer">
                <Graph data={this.state.data} />
            </div>
        )
    }
}

class Graph extends React.Component {

    componentDidMount() {
        this.d3Graph = …

看来我无法使用基于userinput的标签创建节点.我想将表单中的user userinput存储在变量中并将其传递给Cypher查询.虽然这似乎适用于属性,但它不适用于标签.我花了半天时间来处理各种可能性:

('CREATE n:{typeParam} {desc:{descParam}, userID: {IDParam}}) RETURN n', {typeParam:type, descParam: desc, userID: id})

('CREATE n (SET n:{typeParam} {desc:{descParam}, userID: {IDParam}}) RETURN n', {typeParam:type, descParam: desc, userID: id})

('CREATE n:($typeParam) {desc:{descParam}, userID: {IDParam}}) RETURN n', {typeParam:type, descParam: desc, userID: id})

label变量的第一个字符始终被视为无效输入.我真的很想知道如何做到这一点.

这就是文本现在在圆圈内的显示方式：

这就是我想在圆圈内显示文本的方式：

我正在寻找一种方法来切断/隐藏/或？文本中不适合圆圈的部分，并在这些过长文本的末尾显示三个点。我找到了许多解释如何将多个单词包裹在一个圆圈中的答案，但我找不到一种方法以这种方式将一个太长的单词放入一个圆圈中。

这些是输入时添加到圆圈和文本的样式：

enterNode = (selection) => {
        selection.select('circle')
            .attr("r", 30)
            .style("fill", function (d) {
                return color(d.label)
            })
            .style("stroke", "#4D5061")

        selection.select('text')
            .style("fill", "#3D3B30")
            .style("font-weight", "600")
            .style("text-transform", "uppercase")
            .style("text-anchor", "middle")
            .style("alignment-baseline", "middle")
    }

圆圈是以这种方式显示的 d3 力布局的一部分

<svg>
  <g class="node-group">
    <g class="node>
      <circle class="circle"></circle>
      <text class="text"></text>
    </g>
  </g>
  <g class="link-group">...</g>
</svg>

如果您对如何解决这个问题有想法，我真的会很高兴！