我正在使用d3.js来显示有关网络流量的信息,从而产生很大的效果.在可视化的某个点,y轴用于显示字节数. 我当前使用的是d3.svg.axis().ticks()系统,它的轮数很好,例如20000.转换为kB / MB / etc时,结果却是尴尬的数字,例如19.5和9.8.有没有一种方法可以使(2 ^(10 * c))的倍数变回原来的价格,例如1024、1048576等,而不是(10 ^ c)的倍数? 其他信息/想法: >我很欣赏svg.axis为我处理绘画的基本细节,并希望找到一个不会取代此功能的解决...
我想用D3.js绘制柏林(德国)的轮廓. 我使用的Berlin的geoJSON文件是这样的(有Berlin-“bundeslnder”):http://opendatalab.de/projects/geojson-utilities/ 但这不适用于我的.json文件.对于我们的州,我无法发现与该.json文件的区别,使用完全相同的代码就可以正常工作:http://examples.oreilly.com/0636920026938/chapter_12/us-states.json 我还试图完全复制us-states文件,删除除一个之外的所有“功能”条目,然后仅用文件的坐标数...
我正在尝试在d3.js中创建一个包含两个图表的数据可视化:平行轴图和水平色条图(我只是用这个名字组成,但是基本上是一系列彩色矩形).平行轴图中的每条线都与色条图中的一组矩形相关联. 现在,将鼠标悬停在给定的行上将突出显示该行,而将鼠标悬停在给定的矩形上将突出显示该组矩形.我的目标是在用户将鼠标悬停在任一图表上时,在相反的图表上突出显示关联的线或一组矩形.如果我用相同的函数生成两个图表,这似乎非常简单.但是,赋予每个图...
我正在尝试创建一个简单的可缩放图表,其中包含时间缩放的x轴和序数y轴(字符串数组).该图表可以与实值y轴配合使用,但是当我使用序数y轴时,会得到一个Uncaught TypeError: undefined is not a function我已经花了很多时间来解决这个问题,但是看不到解决方案.我想知道D3专家是否会帮助我看到光线. 对于专业读者,此异常发生在d3.v3.js重新缩放函数中的第1344行.function rescale() {if (x1) x1.domain(x0.range().map(function(x) {ret...
我基于this拖放示例进行工作: 我想拖动一个组.我将两个矩形都放在单个组中,现在想拖放整个组,在我的代码中,拖放仅适用于单个矩形,而不适用于组. 这是我的代码:<!DOCTYPE html><html><head><script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> </script><title>Drag And Drop</title></head><body> <div id="viz"></div><script type="text/javascript">var vizSVG = d3.select("#viz").append("svg")....
我一直在尝试根据某些节点的链接为它们着色,但是我不确定该怎么做.这是我当前的图形:我一直在尝试自动为同一集群中的所有节点着色(即通过作为集群中任何节点的源或目标相互连接),但到目前为止我的所有尝试都是徒劳的. 我听说可能需要执行递归函数,但是我的递归是自学的,从根本上来说是错误的.这是我当前的代码:function assignGroup() { var groupedNodes = [];for(var i = 0; i < gNodes.length; i++) {if(nodes[i].group !== u...
我有以下格式的csv文件type,1,2,3,4,5,6,7,8,.... // Upto 48 type1,54.69801915,84.4717406,81.87766667,66.48516667,... type2,51.57399106,84.23170179,82.13950136,67.37540461,... ......我想使用带有d3的csv数据绘制折线图.一旦我使用下面的代码嵌套它们d3.nest().key(function(d) { return d.type; }).entries(data);我的json看起来如下{ key: "type1", values: […] }在内部值中,它只是一个元素数组,其值是{1:54.69801915...
我试图通过向每个节点添加特定标签(SVG文本)来修改此D3.js示例(Dynamic Node-Link Tree),但未成功. 如果我理解正确,那么在简要了解SVG规范和D3文档之后,最好的方法是创建SVG组并将其移动. 不幸的是,这是行不通的,因为过渡对小组没有影响.有我不知道的简单方法吗? 非常感谢.解决方法:如果您正在寻找一种效果,可以切换文本标签的圆圈,则可以执行以下操作:// Enter any new nodes at the parent's previous position. node.enter()....
这是我的代码在我的svg中填充圆圈.var svgContainer = d3.select("body").append("svg").attr("width", 1000).attr("height", 1000);var circles = svgContainer.selectAll("circle").data(nodes).enter().append("circle");var circleAttributes = circles.attr("cx", function (d) { return d.x_axis; }).attr("cy", function (d) { return d.y_axis; }).attr("r", function (d) { return d.radius; }).attr('fill', 'green')但是...
我是d3图表和javascript的新手,这是一场艰苦的战斗. 经过一堆研究,我能够用CSV文件填充图表.所以现在,我试图用json数据填充图表. 这是我的代码.它大致基于this example.但是我更喜欢使用我的代码(即d3.v4):var width = 960,height = 136,cellSize = 17;var color = d3.scaleQuantize().domain([9000, 12000]).range(["Blue", "Red", "Green", "Yellow", "Purple", "Black"]); var dateParse = d3.timeFormat("%Y-%m-%d"); var svg...
我使用的是Leap Motion,而不是使用鼠标.它是一种运动感应设备,它允许使用手指,手和手势而不是鼠标. 我有一些代码可以绘制用户手指与屏幕相交的点,因此用户手指在网页上用蓝色圆圈表示(与该代码相同:http://schnipz.github.io/leap-motion-demos/d3.js/index.html). 我在网页上也有一个力导向图,与该示例相同:bl.ocks.org/mbostock/4062045 我想允许用户在手指(蓝色圆圈)与节点相交时“拖动”节点. 我可以使点击模拟代码正常工作,...
我正在尝试使用D3.js和this geoJSON文件显示印度的地图.当我在浏览器中运行以下HTML文件时,不会生成地图,并且在控制台上没有错误. 我怀疑这与投影有关,因为当我从path变量中删除投影时,确实在svg顶部得到了一个小地图.我尝试了墨卡托(Mercator),阿尔伯斯(Albers)和其他投影,但似乎没有任何效果. 码:<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>India</title><script src="https://d3js.org/d3.v4.min.js...
我是D3的新手.因此,我正在尝试绘制一个图形,其中两个或多个孩子可以具有相同的父级.我想知道如何使链接再次直接指向同一节点?我的链接断开了. 任何帮助都会很棒. 这是我的代码…var margin = { top: 100,right: 50,bottom: 200,left: 1360 },customNodes = new Array(),layer_wider_label = new Array(),label_w = 70,branch_w = 70,m = [100, 500, 100, 500],realWidth = window.innerWidth,realHeight = window.innerHeight,h =...
我正在使用模块系统创建地图.我或多或少习惯了D3.js v3,但我还是习惯了v4. 我正在尝试添加一个调度,但我不知道如何重新绑定V4中的导出,因为此功能现在不可用. 因此,对于我的调度(_dis)和我的特定事件(“changetype”),d3 v3中的重新绑定在返回导出之前是正确的,例如:d3.mapDots = function (districts){var _dis = d3.dispatch('changetype');(...)exports.color = function(_c){if(!arguments.length) return color;color = _c;r...
我读过很多关于d3.js和工具提示的内容,可以参考图表上的各个点. 相反,我的图形图形使用一个长路径来渲染.我想知道如何将鼠标悬停方法应用于这样的路径,然后我会相应地绑定一个工具提示div http://jsfiddle.net/ericps/xJ3Ke/6/svg.append("path") .attr("class", "area") .attr("clip-path", "url(#clip)") .style("fill", "url(#gradient)");解决方法:您可以设置一个不可见对象层,表示您希望拥有工具提示的每个点,并为这些对象添加...