d3.js

how to set d3.brush extent right?

由 廉价感情. 提交于 2019-12-31 02:20:28
问题 I am writing a d3 widget based on Mike Bostocks example http://bl.ocks.org/mbostock/1667367 So I am trying to set brush extent with predefined dates, but the extent rectangle is not applied to those dates. var brush = d3.svg.brush() .x(x2) .extent([new Date("May 2001"), new Date("May 2002")]) .on('brush', brushed); ... the entire code here http://plnkr.co/edit/H3nt9t8pw0nXM4yHp25P?p=preview 回答1: As I understood, you want to set initially the date period. You'll need to call brush component

Using RequireJS to load plotly and D3

由 落爺英雄遲暮 提交于 2019-12-31 02:16:08
问题 I am trying to use RequireJS to load the plotly and d3 libraries in my js code. I have tried this: require.config({ paths: { d3: '/static/scripts/plotly/dependencies/d3.v3.min', plotly: '/static/scripts/plotly/plotly.min' } }); require(['d3'], function(d3) { d3(); }); require(['plotly'], function(plotly) { plotly(); }); But this doesn't work. When my js function is called I get: Uncaught ReferenceError: plotly is not defined Uncaught ReferenceError: Plotly is not defined Uncaught

Dynamic Pie Chart Data in Javascript and PHP

由 人盡茶涼 提交于 2019-12-31 01:47:08
问题 The following code represent the data that will be shown in a pie chart visualization in javascript. <script type="text/javascript"> var agg = { label: 'Aggressive', pct: [60, 10, 6, 30, 14, 10] }, bal = { label: 'Balanced', pct: [24, 7, 2, 18, 13, 36] }, mod = { label: 'Moderate', pct: [12, 4, 2, 10, 11, 61] }, inc = { label: 'Income', pct: [ 0, 0, 0, 0, 0,100] }, </script> I would like to have the pct values as php variables, and not fixed as in the code above. How do I do this? I would

Creating and appending detached elements with d3.create

由 馋奶兔 提交于 2019-12-31 01:44:12
问题 Let's say I create a simple graphic like this: <!doctype html> <html lang="en"> <head> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg></svg> <script> const svg = d3.select('svg'); const g = svg.append('g'); g.append('g') .selectAll('g') .data([5, 10, 20, 40]) .enter() .append('rect') .attr('fill', 'green') .attr('x', d => d) .attr('y', d => d) .attr('height', d => d) .attr('width', d => d); </script> </body> </html> But instead of just appending to it, I want to

Collision detection for nodes of varying sizes not working as expected

由 ＊爱你＆永不变心＊ 提交于 2019-12-31 01:24:47
问题 I have a fully functional d3.js force directed graph. Trying to add collision detection so that the nodes do not overlap. But the caveat is my nodes having a varying radius calculated on the basis of its d.inDegree and d.outDegree node.attr("r", function(d) { var weight = d.inDegree ? d.inDegree : 0 + d.outDegree ? d.outDegree : 0; weight = weight > 20 ? 20 : (weight < 5 ? 5 : weight); return weight; }); Now I am trying to use this varying radius in the function for collision detection var

How to make label in histogram respond to dynamic user input

由 旧街凉风 提交于 2019-12-31 00:59:10
问题 I have the following working code. It takes the input data and display the histogram based on a threshold. If you run, the code below, the code is working to the extend that the histogram changes as you drag the sliding bar. However the label 26 GENES does not change as we drag the threshold from 1.5 to 2. I expect the value change to 30 GENES . These values are encoded in the var input_data especially nof_genes . How can I make that to take effect? "use strict"; var histograms, thresholds =

Tree with children towards multiple side in d3.js (similar to family tree)

由 限于喜欢 提交于 2019-12-30 19:26:09
问题 var treeData = [{ "name": "Device", "parent": "null" } ]; var treeData2 = [{ "name": "Device", "parent": "null" } ]; $(document).ready(function() { var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 1260 - margin.right - margin.left, height = 500 - margin.top - margin.bottom; var i = 0, duration = 750, root; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select("body").append(

Draw a vertical line representing the current date in d3 gantt chart

由 有些话、适合烂在心里 提交于 2019-12-30 18:55:24
问题 hi this maybe very easy for you guys i just need to draw a vertical line that represents the current date in my d3 gantt chart. i already figure out the values for my y i just having trouble in the value in my X because im using a time.scale in my x-axis. ill paste the codes that draws my gantt chart and the part where i draw my vertical line is located at the very bottom initTimeDomain(tasks); initAxis(); var numFormat = d3.format(",.0f"); var dateFormat = d3.time.format("%Y-%b-%d"); var

How to set the domain and scale on an yaxis on a discreteBarChart nvd3.js

由 强颜欢笑 提交于 2019-12-30 18:48:08
问题 I'm using d3.js charts in one of my applications. Here they are in this image See Charts For Y axis on Money chart (See in the Image), I want maximum value rounded to 400, no matter what maximum bar size is here it is $358.72, but I want to keep bar at 358.72 but on Y Axis it would be 400 Limit. Code for it is here tradesChart = [ { key: "Cumulative Return", values: [ { "label" : "6E", "value" : 100 }, { "label" : "NG", "value" : 100 }, { "label" : "TF", "value" : 67 } ] } ]; nv.addGraph

How to know if topojson is installed and working normally?

由 北城余情 提交于 2019-12-30 14:49:42
问题 How to know if topojson is well installed and working normally? An example tiny file to convert will be appreciate. with both the source and expected result 回答1: If you haven't stumbled across this yet I found it to be a great walkthrough of the entire process: http://bost.ocks.org/mike/map/ The above link also includes the command to run to check if topojson is installed: $which topojson If topojson is installed correctly this will print out the directory where it's installed, which might
订阅 d3.js