From e65ef764811256cab03ce0a0fb78ee9c14f3fee7 Mon Sep 17 00:00:00 2001 From: Robert Vogt Date: Tue, 13 Oct 2015 14:30:44 +0200 Subject: [PATCH] =?UTF-8?q?Try=20to=20recreate=20Brodworscht=20&=20B=C3=BC?= =?UTF-8?q?rli=20example?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- visualize.js | 42 ++++++++++++++++++++++++------------------ 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/visualize.js b/visualize.js index ce897ac..08238c1 100644 --- a/visualize.js +++ b/visualize.js @@ -16,19 +16,14 @@ var circleData = [ { - radius: 20, + radius: 40, color: '#2980b9', - percentage: 5.9 + percentage: 84.9 }, { radius: 30, color: '#2980b9', - percentage: 6.1 - }, - { - radius: 25, - color: '#2980b9', - percentage: 12.5 + percentage: 39.2 } ]; var rectData = [ @@ -73,19 +68,19 @@ target: forceData[3] }, { - source: forceData[1], + source: forceData[2], target: forceData[4] }, { source: forceData[2], - target: forceData[5] + target: forceData[4] } ]; force .nodes(forceData) .links(linkData) - .charge(100) + .charge(-100) .linkDistance(400) .start(); @@ -98,17 +93,28 @@ .call(force.drag) .on('mousedown', function() { d3.event.stopPropagation(); }); - var circles = circleGroups - .append('circle'); + var circles = circleGroups.append('circle'); - var rects = svg - .selectAll('rect') + var rectGroups = svg + .selectAll('g') .data(rectData) .enter() - .append('rect') + .append('g') + .attr('class', 'eigenschaft') .call(force.drag) .on('mousedown', function() { d3.event.stopPropagation(); }); + var rects = svg.selectAll('.eigenschaft').append('rect'); + + // + //var rects = svg + // .selectAll('rect') + // .data(rectData) + // .enter() + // .append('rect') + // .call(force.drag) + // .on('mousedown', function() { d3.event.stopPropagation(); }); + var links = svg .selectAll('line') .data(linkData) @@ -117,12 +123,12 @@ .style('stroke', '#333') .style('stroke-width', '1px'); - var circleText = circleGroups + var circleText = svg.selectAll('.frequency') .append('text') .attr('dx', 12) .attr('dy', '.25em') .text(function(d) { return d.percentage + '%'; }); - + force.on('tick', function() { links .attr('x1', function(d) { return d.source.x; })