d3.js

问题 I'm developing a personal web app with react and d3js. The core concept is I receive a bunch of data via websocket every 5 seconds, and I use these data to draw real-time circle on the canvas. The data I receive is an array of object, which looks like this: data = [{ name: 'alice', x: 10, y: 20, }...] And this is how I draw the circles: _renderCircles = () => { const t = d3.transition().duration(500); const radius = 3; const group = d3.select(this.refs.container) .selectAll('g.ring') .data

问题 I followed this blog here and here's the code that I'm trying to run on my Jupyter Notebook - essentially a simple scatter plot from the iris dataset. from IPython.core.display import display, HTML from string import Template import pandas as pd import json, random HTML('<script src="./d3.min.js"></script>') filename = 'https://gist.githubusercontent.com/mbostock/3887118/raw/2e68ffbeb23fe4dadd9b0f6bca62e9def6ee9e17/data.tsv' iris = pd.read_csv(filename,sep="\t") iris_array_of_dicts = iris.to

问题 I want to update d3-force elements when click, but I find something wrong. What I want is: generate all links first then generate all nodes, so that the node can override the link So when clicked the elements should be: <svg> <line ...></line> <line ...></line> <line ...></line> <line ...></line> <g><circle ...></circle></g> <g><circle ...></circle></g> <g><circle ...></circle></g> <g><circle ...></circle></g> <g><circle ...></circle></g> </svg> But I get: <svg> <g><circle ...></circle></g>

问题 Start exploring D3 for some of my work.Try to add tooltips to a network graph by d3, but after searching around and tried different solutions, it still refused to show up ... desc: a graph using d3 (get online) Adding tooltips: add style in CSS .tooltip { position: absolute; opacity: 0; visibility: hidden; width: 300 px; height: 200 px; padding: 2 px; font: 12 px sans - serif; background: red; border: 0 px; border - radius: 8 px; z - index: 50; pointer - events: none; } initialized a tooltip

问题 When I zoom in on my d3 line chart, I can't get daily ticks to display. The lowest tick size that will show up are weekly ticks. Maybe my domain is incorrect? Or I need to use transform.rescaleX() like shown here https://bl.ocks.org/stepheneb/29134b7a51a1ede49f6fc57c5a2a5f38 https://jsfiddle.net/urb1qvch/1/ Javascript // Prep data var x = d3.timeDays(new Date(2010, 06, 01), new Date(2020, 10, 30)); var y = Array.from({length: x.length}, Math.random).map(n => Math.floor(n * 10) + 5); var data

问题 I can't seem to understand how sunburst in the sunburstR package handles certain paramenters, namely the vector of colors given to it and how it applies the colors towards the different categories, as well as how to show the labels for the different partitions. Is there a logic to it, and is there a better way to manually specify which color should go with which root/leaf? From ?sunburst : (No idea what they mean by "supply a list with range and/or domain." colors vector of strings

问题 When nodes within my force directed visualization are clicked any child nodes (and their associated links) are toggled on/off. However, the text which acts as a label for these links is not removed when its associated child node and link are removed. See below: Here is the relevant section of code, with the last line ( linkText.exit.remove() ) being my attempt at removing these labels: var nodes = flatten(data); var links = d3.layout.tree().links(nodes); var path = vis.selectAll('path.link')

问题 I have a Dendrogram / cluster diagram's root using d3.hierarchy. I'm trying to update the root with a selected node which should become the new head, with a new tree drawn with that node at the top. This should replace the old tree. The steps are as follows: read in flat data convert to hierarchy using d3.stratify convert this to a cluster (with coordinates etc) draw using new select.join (which no longer needs explicit exit / remove) user clicks on a node's circle update hierarchy with

问题 I'm trying to draw the SVG elements from an array of different shapes. I can see all shapes added to the document successfully but I cannot see them rendered on the screen. Interestingly, if I just try to edit the HTML element (without making any changes) from the browser's DOM explorer (in my case Chrome) the shapes get drawn as expected. Any suggestion of what's being done wrong here? http://fiddle.jshell.net/1qd2kt9s/ Thanks var my_data=[{"shape":"circle","attr":{"r":"50","cx":"60","cy":

问题 I'm trying to develop a custom shape in D3, but I'm a little green Javascript wise and am not sure what the D3-Shapes library is doing under the hood. In particular, I'm not sure what the default function in symbol.js is doing or how it is used. From the little bit of JS that I do know it appears to be describing a prototype or possibly a class. Supposedly one may register additional shapes using the symbol.type class/function but I'm not sure how I should be calling this e.g. var symbol =