d3.js

问题 I want to add a rectangle in my d3.js graph highlighting a specific data region. The problem is I don't want to specify a starting point and then a height and length. Rather I would like to specify two points positioned diametral – on the upper left and lower right corner of the rectangle. The highlight area rectangle needs to go from my lowest X value to the highest X value in my dataset and from a specific lower y bound to a specific higher y bound. 回答1: If you are just passing the x and y

问题 I have a D3.js tree that have different colours applied to nodes and links. The colouring is hardcoded: nodeUpdate.select("circle") .attr("r", 10) .style("fill", function(d) { if(d.name == "Top Level") { return d._children ? "blue" : "#fff"; } if(d.name == "Second A") { return d._children ? "red" : "#fff"; } if(d.name == "Second B") { return d._children ? "green" : "#fff"; } if(d.name == "Second C") { return d._children ? "purple" : "#fff"; } if(d.name == "Second D") { return d._children ?

问题 I'm building a basic dashboard for internal use. I've little experience with D3 / SVG etc so please excuse me if this is obvious: Aim I have a time series of values, one value per date for a full year. Inspired by the example on the dc.js wesbite, I'm displaying a 'mini' bar plot of the entire series, and allowing the user to select a range which in turn sets the limits of the axis scale range of a 'large' line plot. By default (on page load / refreshAll()) I've set the limits of the large

问题 This question already has an answer here : Change text and remove Select All from dc.selectMenu (1 answer) Closed 3 days ago . I have a dimension with the values A,B,C,D. I would like to create a selectMenu with dc.js, where the value A is selected by default only one value can be selected (no mulit-selection) always one value has to be selected a) I used .multiple(false) and expected that a single value is selected by default. However, the default state of the menu is to select all available

问题 I have imported zoom like this import {zoom} from 'd3-zoom'; My svg and group container look something like this const svg = select(root) .append('svg') .attr('width', width) .attr('height', height); const container = svg.append('g'); const zoomScale = 2; I tried to set an initial zoom level (via zoom().scaleTo() function like this zoom().scaleTo(container, zoomScale) or like this container.call(zoom().scaleTo, zoomScale) But nothing is reflected back. Interestingly the zoom function works ,

问题 I have structure with data and shapes definition: var data = [ { "id": "first", "shapes": [ { "shape": "polygon", "points": [["8","64"],["8","356"],["98","356"],["98","64"]] } ] }, { "id": "second", "shapes": [ { "shape": "ellipse", "cx": "63", "cy": "306", "rx": "27","ry": "18" }, { "shape": "polygon", "points": [["174","262"],["171","252"],["167","262"]] } ] } ]; // in the data may be stored any SVG shape I would like to create SVG: <svg width="218" height="400"> <g transform="translate(0

问题 I want to know how to make a sankey diagram collapse/expand the nodes based on mouse click. My diagram is this: https://bl.ocks.org/TheBiro/f73a2a0625bb803179f3905fe7624e22 For example, I want to click on the node "PAGOU" and all of the subsequent links and nodes (on the right) to be removed. I made it based on the Vasco Asturiano (reference on readme.md) aligment options. 回答1: I adapted the code below from my previous answer here: Collapsible D3 force directed graph with non-tree data I

问题 I got stacked bar in d3 and need to add tooltip to it. I have trouble to figure out which bar the mouse is in, any idea how can I decide which bar the mouse is in? group.enter().append("g") .classed("layer", true) .attr("fill", d => z(d.key)) .on("mouseover", function(d) { var num = d.key == "xkey" ? d[4][1] : d[4][1] - d[4][0] tip.html("<p>" + d.key + " " + num + "</p>") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px") .style("visibility", "visible") }) .on

问题 I got stacked bar in d3 and need to add tooltip to it. I have trouble to figure out which bar the mouse is in, any idea how can I decide which bar the mouse is in? group.enter().append("g") .classed("layer", true) .attr("fill", d => z(d.key)) .on("mouseover", function(d) { var num = d.key == "xkey" ? d[4][1] : d[4][1] - d[4][0] tip.html("<p>" + d.key + " " + num + "</p>") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px") .style("visibility", "visible") }) .on

问题 I am new to d3.js and what I have achieved till now is, this using tutorials and videos. Now I am trying to add the dataset.value below the label text as shown in the figure. var dataset = [{ label: 'On trip', value: 35 }, { label: 'parked', value: 65 }]; How do I achieve this? 回答1: You can update your append text code with following code. text.enter() .append("text") .attr("dy", ".35em") .append('svg:tspan') .attr('x', 0) .attr('dy', 0) .text(function(d) { return d.data.label; }) .append(