d3.js

问题 I have created a world map in d3 using the geoNaturalEarth1() shown here. I used a geojson map of the world with this projection to get the map as shown in the code below. However, this shows the countries floating in space without a border. I'd like to draw a border around the map projection, so that it looks more like a map. The border would be the flat top/bottom, curved sides as shown in the projection image. Is this possible, and how could I go about doing it? var projection = d3

问题 So, I have tried looking this up in many places, but have not yet found an answer for my situation. What I have is a loop, looping for each hour in a day for every day in a year, and, with many insanely ridiculous mathematical equations, getting the angle and distance of the sun at a specific location. The outcome of the equations gives me a number that I use as an x value to obtain to the image's pixel color at that point. The image is a gradient: when x=0; no sunlight, when x=(1/2

问题 I"m using d3 v4. My x-axis data consists of time in milliseconds (since 1970). I would like to display this as eastern standard time, for example 08/09/17 5:20 PM EDT so I tried focus.select("text").text(d.value).append("tspan") .attr("x", 10).attr("dy", "1.5em").text(d3.timeFormat("%m/%d/%Y %H:%M %p %Z+5")(d.index_date)); but unfortunately it is instead displaying as 08/09/17 5:20 PM -0500 +% What's the proper way to format the date/time as EDT (US Eastern standard time)? 回答1: D3 v4 time

问题 I currently write a d3 plugin. However, I want to call this plugin as property of the global d3 as in the original example: d3.foo() But when I do this, my configurations for rollup lead to a clash of the d3 references. Here is one minimal example (with just one file) to illustrate: I downloaded the original example of the d3 plugin and slightly changed the source file foo.js: //.src/foo.js import * as d3 from "d3"; export default function() { return d3.select("body").append("div").text(42);

问题 I am trying to achieve this: with the line path & shadow's transition in sync. And I am able to do that with the help of this answer, but I am trying to figure out a way to append the red color gradient area after a certain (x, y) point (in this case (48, 0)). I filtered the graph data and have two arrays (x-axis points -> from 0 to 48 and from 48 to 60), but then don't know how to apply the data in attrTween function. Here's the stackblitz link. Here's the shadow function: // Blue const

问题 I have tried many ways to convert this:- https://observablehq.com/@d3/zoomable-sunburst into react as it's majorly using observable and runtime . That is not being converted to React. It's using some helper.js as well in this. Code is here https://observablehq.com/@d3/zoomable-sunburst Is there any idea that anyone can give or any suggestion to do it. Thanks in advance 回答1: The op has reached to Observablehq forum. Here are some insights on the answer for the problem in case you need help

问题 I have tried many ways to convert this:- https://observablehq.com/@d3/zoomable-sunburst into react as it's majorly using observable and runtime . That is not being converted to React. It's using some helper.js as well in this. Code is here https://observablehq.com/@d3/zoomable-sunburst Is there any idea that anyone can give or any suggestion to do it. Thanks in advance 回答1: The op has reached to Observablehq forum. Here are some insights on the answer for the problem in case you need help

问题 I am using LeafletJs and D3js to put a bar chart in a Leaflet popup window. How can I assign a custom color for each ethnic group bar? I want to assign the custom colors within the D3 code because I can't modify the original dataset. Link Thanks. var onEachFeature = function onEachFeature(feature, layer) { colors = d3.scale.category20() var div = $('<div id="chart"><h3>Ethnic Group Distribution</h3><svg/><h4>Additional details:</h4>Extra stuff here</div>')[0]; var popup = L.popup({ minWidth:

问题 I have a D3 scatter chart and I'm trying to add the option to view the chart as circles or as images, based on the value of a variable. At the moment I can view the chart as either (as long as I comment one of them out) Here is the code for appending the images: svg.selectAll(".image") .data(data) .enter() .append("svg:image") .attr("x", xMap) .attr("y", yMap) .attr("width", logosize) .attr("height", logosize) .attr('transform', function(d) { return 'translate('+ -d.logosize/2 +',' + -d

问题 I want to build a visualization in D3.js that illustrates the concept of potential energy and kinetic energy for my students. In essence, I want the students to be able to drag a skier up a slope (i.e. a Line) and when they drop him, he transits down again. I'm sure it is an easy task in D3 but I'm struggling to understand how I can get the skier icon to be draggable only along the line path? Here's an image for illustration: I want the skier icon to switch place with the ball with the green