d3.js

问题 I am trying to amend M Bostock's US unemployment choropleth map that applies D3 scale chromatic. I am now able to amend the bucket-sizes as I please to plot my data, however when I do so the legend seems to grow in size exponentially and I am unable to make it fit to a desired width and scale the intervals appropriately. Please see the attached jsfiddle where I demonstrate the issue encountered. I would like to amend the legend in two ways: space between ticks is fixed, e.g. 50px space

问题 I've tried the circle plot example as the following: var x=20, y=20, r=50; var sampleSVG = d3.select("#viz") .append("svg") .attr("width", 800) .attr("height", 600); sampleSVG.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", r) .attr("cx", x) .attr("cy", y); But I want to figure out how to plot without a loop a sequence of circles from an array like: data = [ [10,20,30], [20,30,15], [30,10,25] ]; 回答1: Maybe this example could help? var data = [ [10,20,30], [20,30

问题 I have an object that looks something like this: data = { questions: [ value: "Question 1", answers: [ {value:"answer1"}, {value:"answer2"} ], value: "Question 2", answers: [ {value:"answer1"}, {value:"answer2"} ] ] } (This is simplified - answers have a count that will be displayed using bar graphs. I think I know how to do that once I get there, however.) The issue I'm having is dynamically (because the data changes frequently) creating the HTML structure, which should look something like

问题 I have an object that looks something like this: data = { questions: [ value: "Question 1", answers: [ {value:"answer1"}, {value:"answer2"} ], value: "Question 2", answers: [ {value:"answer1"}, {value:"answer2"} ] ] } (This is simplified - answers have a count that will be displayed using bar graphs. I think I know how to do that once I get there, however.) The issue I'm having is dynamically (because the data changes frequently) creating the HTML structure, which should look something like

问题 I am trying to build a shiny app that displays a complex force network graph that I have coded in d3JS. This goes beyond what I can do the R package networkD3, which I have tried. I instead want to bring in my highly customized .js file that handles the display and this is where I am lost. To keep things simple let's consider the simplest of force network graphs, adapted from here: http://bl.ocks.org/sathomas/11550728 If someone can show me how to bring in the file SimpleFN.js (see below)

问题 (I'm a d3js newbie) I'm using the d3.layout.force to visualize a graph of nodes that are divided into clusters, basically something like this (even if in my version every cluster's node keep the gravity focus set to its cluster's center): http://bl.ocks.org/mbostock/1747543 What I'd like to accomplish is to keep each cluster separated from the other with a MIN distance. I set random points for each cluster center at initial stage: for(var i = 0; i < clusterLength; i++) { var baseX = 3 var

问题 I'm working on a map application using D3 and Angular, and I'm having an issue showing scope values in a template from an on-click event. My directive: angular.module("maineMap") .directive("ngMap", ["appConfig", function(config){ function countyClickHandler(d, i, scope){ scope.currentCounty(d.properties.fips); console.log(scope.countySelection); } function initMap() { //.... other code g.append("g") .attr("class", "counties") .selectAll("path") .data(scope.mapData.features) .enter() .append(

问题 This is the array I want to reproduce: [{ plts: 'Zlnd', values: { '150k': 4786, '200k': 1319, '250k': 249 }} ,{ plts: 'Hsls', values: { '150k': 1101, '200k': 412, '250k': 674 }}] However, I don't get beyond the point of where 1) I have a grouping which just gives me a total sum at 'plts' level and not any of the detail elements and 2) the sum is located at the leaf level of 'values', but I need it to be at the 'plts'level. Using this to get the flat data from mysql (which works, but does not

问题 I have a hard time understanding how D3 works. I'd just like to get a simple network graph (without animation nor “force” effects) using plain DIVs (containing formatted text) as nodes. No SVG is to be used for nodes. The DIVs would be, for instance: <div id="div1">One</div> <div id="div2"><b>Two</b></div> <div id="div3"><span style="color: red;">Three</span></div> <div id="div4"><p class="someclass">Four</p></div> The links between DIVs/nodes would be something like this (which is probably

问题 For my chart I had to create groups which contain several elements (line, rect, text). I did my setup like in this question: D3: update data with multiple elements in a group I defined my groups like this: var group = groupContainer.selectAll('g') .data(items); var groupEnter = group.enter() .append('g'); For each group element I appended a rect and did the update (later for my brushing event). // append groupEnter.append('rect') .attr('class', 'item') .style('fill', function (d) { return d