move most style definitions to force*.css

This commit is contained in:
Nils Schneider 2012-06-06 17:17:43 +02:00
parent 471c17f31e
commit 2dfca44c70
3 changed files with 11 additions and 37 deletions

View file

@ -1,36 +1,9 @@
.node ellipse {
fill: #fff;
stroke-width: 2.5px;
}
.node text {
font-size: 10px;
color: #333;
}
.link line {
stroke: #333;
stroke-opacity: 1;
}
.link .label {
fill: transparent;
stroke: #C83771;
stroke-width: 1px;
}
.strength {
font-size: 10px;
fill: #C83771;
}
#chart, #chart svg { #chart, #chart svg {
display: block; display: block;
vertical-align: middle; vertical-align: middle;
} }
#chart { #chart {
background-image: url(gplaypattern.png);
position: relative; position: relative;
} }
@ -59,6 +32,11 @@
#controlpanel { #controlpanel {
top: 10px; top: 10px;
right: 10px; right: 10px;
font-size: 10pt;
}
#controlpanel p {
margin: 0;
} }
#nodeinfo h1, p { #nodeinfo h1, p {

View file

@ -12,8 +12,7 @@ function getOffset( el ) {
var offset = getOffset(document.getElementById('chart')) var offset = getOffset(document.getElementById('chart'))
var w = window.innerWidth - offset.left, var w = window.innerWidth - offset.left,
h = window.innerHeight - offset.top, h = window.innerHeight - offset.top
fill = d3.scale.category20()
var cp = d3.select("#chart").append("div") var cp = d3.select("#chart").append("div")
.attr("id", "controlpanel") .attr("id", "controlpanel")
@ -280,7 +279,7 @@ function update() {
link.selectAll("line") link.selectAll("line")
.style("stroke-width", function(d) { .style("stroke-width", function(d) {
return Math.min(1, d.strength * 2) return Math.max(1, d.strength * 2)
}) })
link.selectAll("path.label") link.selectAll("path.label")
@ -330,6 +329,9 @@ function update() {
.call(force.drag) .call(force.drag)
nodeEnter.append("ellipse") nodeEnter.append("ellipse")
.attr("class", function(d) {
return "group-" + d.group
})
node.selectAll("ellipse") node.selectAll("ellipse")
.attr("rx", function(d) { .attr("rx", function(d) {
@ -340,13 +342,6 @@ function update() {
if (d.group == 3) return 4 if (d.group == 3) return 4
else return 10 else return 10
}) })
.style("fill", function(d) {
if (d.group == 3) return fill(d.group)
else return ""
})
.style("stroke", function(d) {
return fill(d.group)
})
nodeEnter.filter(function(d) { nodeEnter.filter(function(d) {
return d.group != 3 return d.group != 3

View file

@ -5,6 +5,7 @@
<title>Freifunk Lübeck - Knotengraph</title> <title>Freifunk Lübeck - Knotengraph</title>
<link href='style.css' rel='stylesheet' type='text/css' /> <link href='style.css' rel='stylesheet' type='text/css' />
<link href='force.css' rel='stylesheet' type='text/css' /> <link href='force.css' rel='stylesheet' type='text/css' />
<link href='force-light.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-button.js"></script> <script type="text/javascript" src="bootstrap-button.js"></script>
<script type="text/javascript" src="d3.v2.js"></script> <script type="text/javascript" src="d3.v2.js"></script>