Tag: d3.js

D3将文本附加到SVG矩形: 我正在寻找附加HTML到D3矩形给我一个多行工具提示。底部是我如何添加一个矩形，可能是问题的一部分。最上面是应该在我的世界中工作的代码。 newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>"); 哪个插入文本字段到SVG，它只是不显示： HTML ： <rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red"> <textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea> </rect> 我有一个鼠标function，它运行以下内容： newRect = svg.append("rect") .attr("x", xCor) .attr("y", yCor) .attr("width", 130) .attr("height", 160) .attr("fill", "red") .attr("id", "rectLabel"); 我认为我应该这样做，但它不起作用。它只是删除我试图追加到g.node。 newRect = $(this).enter().append("rect") […]

用自定义地图/ shp制作地图: 在R，我想帮助试图在这里复制我自己的自定义SHP（Shapefile）文件或地图的教程是一个交互式的等值线地图… 地图是北爱尔兰的小地区。这可以在这里find。以下是我迄今采取的步骤… 我认为问题是geographyConfig数据的设置… 任何帮助将非常感激…. # Download and unzip the data system('wget http://www.nisra.gov.uk/archive/geography/digital_products/SA2011_Esri_Shapefile.zip') system('unzip SA2011_Esri_Shapefile.zip') # Load libraries library(rgdal) library(rgeos) library(rMaps) shp.file <- 'SA2011.shp' # Convert projection system(paste0('ogr2ogr tmp.shp ', shp.file, ' -t_srs "+proj=longlat +ellps=WGS84 +no_defs +towgs84=0,0,0"')) # Read in the data xx <- readOGR(dsn=getwd(),layer='tmp') mm <- xx@data head(mm) n <- nrow(mm) dat.val <- […]

如何在D3.js中响应屏幕/浏览器大小制作强制布局graphics: 我有一个使用强制布局的graphics，但它具有固定宽度w和高度h ： var svg = d3.select("#viz").append("svg") .attr("id", "playgraph") .attr("width", w) .attr("height", h) var force = d3.layout.force() .nodes(nodes) .links(links) .charge(-1600) .linkDistance(45) .size([w, h]); 这导致了一个svg图表，即使在屏幕或浏览器窗口大小的变化，也不缩放。为了使它响应（即自动调整自己），我尝试使用viewBox和preserveAspectRatio属性： var svg = d3.select("#viz").append("svg") .attr("id", "playgraph") .attr("width", w) .attr("height", h) .attr("viewBox", "0, 0, 600, 400") .attr("preserveAspectRatio", "xMidYMid meet"); 不幸的是，当我调整浏览器窗口大小时，没有任何反应。我想知道.size([w, h])与这个有什么关系。请介绍一下如何使用force布局图来使用viewBox和preserveAspectRatio属性。

如何closurespython simpleHTTPserver？: 所以我试图学习D3，维基build议要在本地查看示例，您必须具有本地Web服务器。任何Web服务器将工作; 例如你可以运行Python的内置服务器： python -m SimpleHTTPServer 8888 & 太棒了…只有现在我有一台服务器在运行…但是在某个时候，我想我应该再次closures它。有没有比使用kill <pid>更好的closures方法？这似乎是一个小工作的大锤子。（我正在运行Mac OS 10.6.8（Snow Leopard）） FWIW： ctrl+c给出大概10行回溯，抱怨中断。 kill -3 <pid>在另一个窗口“Python意外退出”中给出Finder警告。默认的kill <pid>和kill -15 <pid>相对干净（而且很简单）。

如何在d3.js中select当前元素的父元素: 我想访问当前元素的父元素这是HTML的结构 svg g id=invisibleG g circle g circle g circle 基本上我想在鼠标hover在圆圈内时添加文本。所以我希望在任何特定的圈子上hover svg g id=invisibleG g circle –> radius is increased and text presented inside that text g circle g circle hover时，我可以通过d3.select（this）select当前元素，我怎样才能获得根元素（g在我的情况下）？

将FontAwesome图标添加到D3graphics: 我想设置一个FontAwesome的图标，而不是我的D3节点中的文本。这是最初的印象，用文字： g.append('svg:text') .attr('x', 0) .attr('y', 4) .attr('class', 'id') .text(function(d) { return d.label; }); 现在我尝试使用图标： g.append('svg:i') .attr('x', 0) .attr('y', 4) .attr('class', 'id icon-fixed-width icon-user'); 但是，这不起作用，即使标记是正确的，CSS规则正确命中：图标不可见。任何想法为什么？这里是相关的jsbin 编辑我find了插入图像的替代方法： http : //bl.ocks.org/mbostock/950642 node.append("image") .attr("xlink:href", "https://github.com/favicon.ico") .attr("x", -8) .attr("y", -8) .attr("width", 16) .attr("height", 16); 这正是我想要做的，但它不适用于FontAwesome使用的元素。

D3 – 如何处理JSON数据结构？: 我是D3的新手，已经花了几个小时的时间来找出处理结构化数据的任何事情，但没有积极的结果。我想用下面的数据结构创build一个条形图。酒吧（水平）绘制，但只为用户“吉姆”。 var data = [{"user":"jim","scores":[40,20,30,24,18,40]}, {"user":"ray","scores":[24,20,30,41,12,34]}]; var chart = d3.select("div#charts").append("svg") .data(data) .attr("class","chart") .attr("width",800) .attr("height",350); chart.selectAll("rect") .data(function(d){return d3.values(d.scores);}) .enter().append("rect") .attr("y", function(d,i){return i * 20;}) .attr("width",function(d){return d;}) .attr("height", 20); 任何人都可以指出我做错了什么？

D3.js强制有向图，通过使边相互排斥来减less边交叉: 所以我已经有一个页面绘制一个有力的图，就像这里展示的那样。这工作正常。我从这里使用JS，只需稍作调整即可将节点稍微分散一些。这些或多或less是唯一的区别： d3.json("force.json", function(json) { var force = d3.layout.force() .gravity(0.1) .charge(-2000) .linkDistance(1) .linkStrength(0.1) .nodes(json.nodes) .links(json.links) .size([w, h]) .start(); 在减less链接强度的地方似乎使得链接更像是弹簧，所以它变得类似于经常使用的Fruchterman＆Reingold技术。这工作相当好，但只适用于相当小的图表。随着更大的图表，交叉口的数量正在上升 – 正如人们所期望的那样，但是它所处的解决scheme通常远不是最佳的。我不想找一个方法来获得最佳的解决scheme，我知道这是非常困难的。我只是希望它有一些粗加法，试图强制拆分线以及节点。有没有办法在链接之间以及节点之间添加斥力？我不熟悉D3强制的方式，我似乎无法find任何说这是可能的…

学习d3.js进行数据可视化: 我想要开始学习如何使用D3.js包进行数据可视化（作为博士学位项目）。我没有java经验，但我有OOP的背景，因为我主要在python工作。因此，我想知道学习使用d3的最佳方式以及可以推荐给我的环境是什么。

D3，嵌套追加和数据stream: 我正在学习D3的过程中，偶然发现了一个我一直无法find答案的问题。我不确定，如果我的问题是因为我没有习惯图书馆的惯例，或者是因为我目前没有意识到的程序。我还应该提到，我只是在六月份才开始做与networking有关的事情，所以我对JavaScript还是比较陌生的。假设我们正在构build一个工具，可以为用户提供各种图像的食物列表。并且让我们添加额外的约束条件，即每个列表项需要用一个唯一的ID来标记，以便它可以链接到另一个视图。解决这个问题的第一个直觉就是创build一个带有自己ID的<div>列表，每个div都有自己的<p>和<img> 。生成的HTML看起来像这样： <div id="chocolate"> <p>Chocolate Cookie</p> <img src="chocolate.jpg" /> </div> <div id="sugar"> <p>Sugar Cookie</p> <img src="sugar.jpg" /> </div> 这个工具的数据是在一个JSON数组中，其中一个单独的JSON如下所示： { "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" } 有没有办法一举生成HTML？从添加div的基本情况开始，代码可能如下所示： d3.select(containerId).selectAll('div') .data(food) .enter().append('div') .attr('id', function(d) { return d.label; }); 现在，如何在其中添加一个带有<p>的<div> ？我原来的想法是做一些事情： d3.select(containerId).selectAll('div') .data(food) .enter().append('div') .attr('id', function(d) { return […]