{"action":"created","issue":{"url":"https://api.github.com/repos/Olical/react-faux-dom/issues/135","repository_url":"https://api.github.com/repos/Olical/react-faux-dom","labels_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/135/labels{/name}","comments_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/135/comments","events_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/135/events","html_url":"https://github.com/Olical/react-faux-dom/issues/135","id":345689778,"node_id":"MDU6SXNzdWUzNDU2ODk3Nzg=","number":135,"title":"Circle radius is NaN if adding d3 enter.","user":{"login":"royipressburger","id":9999184,"node_id":"MDQ6VXNlcjk5OTkxODQ=","avatar_url":"https://avatars1.githubusercontent.com/u/9999184?v=4","gravatar_id":"","url":"https://api.github.com/users/royipressburger","html_url":"https://github.com/royipressburger","followers_url":"https://api.github.com/users/royipressburger/followers","following_url":"https://api.github.com/users/royipressburger/following{/other_user}","gists_url":"https://api.github.com/users/royipressburger/gists{/gist_id}","starred_url":"https://api.github.com/users/royipressburger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/royipressburger/subscriptions","organizations_url":"https://api.github.com/users/royipressburger/orgs","repos_url":"https://api.github.com/users/royipressburger/repos","events_url":"https://api.github.com/users/royipressburger/events{/privacy}","received_events_url":"https://api.github.com/users/royipressburger/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-07-30T09:57:16Z","updated_at":"2018-08-07T11:53:20Z","closed_at":null,"author_association":"NONE","body":"Hi all\r\n\r\nIm trying to create a bubble view with `d3-hierarchy` using `pack`.\r\nIf I'm using d3 without the `faux-dom` everything works great, also if I'm using `withFauxDOM` most of the things still working. \r\nThe issue starts when I'm adding `enter` so I can add animation for the bubbles on first render.\r\n\r\nthis is the code:\r\n```js\r\n  componentDidMount() {\r\n    this.draw();\r\n  }\r\n\r\n  draw() {\r\n    const size = 1000;\r\n    const faux = this.props.connectFauxDOM('svg', 'bubbles');\r\n    const dataSet = { children: this.props.data };\r\n    const bubbleSizeScale = scaleSqrt()\r\n      .domain([\r\n        this.props.data[sortedData.length - 1].value,\r\n        this.props.data[0].name,\r\n      ])\r\n      .range([50, 100]);\r\n\r\n    const bubbles = pack(dataSet)\r\n      .size([size, size])\r\n      .radius(d => bubbleSizeScale(d.value))\r\n      .padding(5);\r\n\r\n    const svg = d3Select(faux)\r\n      .attr('viewBox', `0 0 ${size} ${size}`)\r\n      .attr('width', size)\r\n      .attr('height', size)\r\n      .attr('class', 'bubble');\r\n\r\n    const nodes = hierarchy(dataSet).sum(d => d.value);\r\n    const node = svg.selectAll('.node')\r\n      .data(bubbles(nodes).descendants())\r\n      .enter()\r\n      .filter(d => !d.children)\r\n      .append('g')\r\n      .attr('class', 'node')\r\n      .attr('transform', d => `translate(${d.x},${d.y})`);\r\n\r\n    node\r\n      .append('circle')\r\n      .enter() // --> Problem starts here..\r\n      .attr('r', d => d.r);\r\n\r\n    node.append('text')\r\n      .attr('dy', '.2em')\r\n      .style('text-anchor', 'middle')\r\n      .text(d => d.data.name);\r\n\r\n    node.append('text')\r\n      .attr('dy', '2em')\r\n      .style('text-anchor', 'middle')\r\n      .text(d => d.data.value);\r\n\r\n    // This is prep for animation.\r\n    console.log(d3Select(faux).selectAll('circle'));\r\n    d3Select(faux).selectAll('circle')\r\n      .transition()\r\n      .duration(1000)\r\n      .attr('r', d => d.r);\r\n    this.props.animateFauxDOM(1000)\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div className=\"bubbles\">\r\n        {\r\n          this.props.bubbles\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n```\r\n\r\nIf I remove the the `enter` line on circle everything render fine just without animation.\r\nBut I do want animation for the circles render.\r\nAgain if I'm using d3 only everything render with the animation.\r\n\r\nAm I using this library correctly?\r\nLet me know if more info is require.\r\nThanks"},"comment":{"url":"https://api.github.com/repos/Olical/react-faux-dom/issues/comments/411030250","html_url":"https://github.com/Olical/react-faux-dom/issues/135#issuecomment-411030250","issue_url":"https://api.github.com/repos/Olical/react-faux-dom/issues/135","id":411030250,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMTAzMDI1MA==","user":{"login":"royipressburger","id":9999184,"node_id":"MDQ6VXNlcjk5OTkxODQ=","avatar_url":"https://avatars1.githubusercontent.com/u/9999184?v=4","gravatar_id":"","url":"https://api.github.com/users/royipressburger","html_url":"https://github.com/royipressburger","followers_url":"https://api.github.com/users/royipressburger/followers","following_url":"https://api.github.com/users/royipressburger/following{/other_user}","gists_url":"https://api.github.com/users/royipressburger/gists{/gist_id}","starred_url":"https://api.github.com/users/royipressburger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/royipressburger/subscriptions","organizations_url":"https://api.github.com/users/royipressburger/orgs","repos_url":"https://api.github.com/users/royipressburger/repos","events_url":"https://api.github.com/users/royipressburger/events{/privacy}","received_events_url":"https://api.github.com/users/royipressburger/received_events","type":"User","site_admin":false},"created_at":"2018-08-07T11:53:20Z","updated_at":"2018-08-07T11:53:20Z","author_association":"NONE","body":"@Olical Hi again. So I mange to narrow it down a bit, now im stuck :)\r\n\r\nI found out that inside `_element.js` row 107\r\n`Element.prototype.setAttribute = function (name, value) ...`\r\nWhen the name is `r` im getting value `NaN` I have no idea why. When I print the raduis in my code it is not NaN...\r\nI also tried to add `if (name == \"r\") value = 50`, and things started to work.\r\nI still in this case dont see any animation but my screen does render without any exception.\r\n\r\nWhen you will have time let me know :)"}}
{"actor":{"display_login":"royipressburger"}}