D3-Farbänderung bei mouseover-Verwendung eingestuft("active",true)
Ich bin neu in js und D3. Ich habe erzeugt eine heatmap-of-Art und möchten, ändern Sie die Farbe der Fliese mit D3 auf.mouseover-Effekt. Ich bin in der Lage, die Farbe ändern, die ausdrücklich, aber möchten, verwenden Sie eine CSS-aktiv-Regel. Wahrscheinlich etwas einfach zu beheben. Jegliche Hilfe würde sehr geschätzt werden. Der vollständige code ist unten.
Dank.
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>MJ-Heatmap</title>
<header>
<H1>Country By District_Port_Nme Heatmap</H1>
<p></p>
</header>
<style>
body {
font: 10px sans-serif;
}
.label {
font-weight: bold;
}
.tile {
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
<!-- CSS active state not working -- >
.tile active {
fill: red;
}
</style>
</head>
<body>
<script type="text/javascript">
var buckets = [
{country:"Brazil", distrinct_port_nme:"Baltimore, Maryland", sum_teu: 2, sum_weight: 18585, count_shipments: 1},
{country:"Colombia", distrinct_port_nme:"Baltimore, Maryland", sum_teu:28, sum_weight:258028, count_shipments:11},
{country:"Brazil", distrinct_port_nme:"Chicago, Illinois", sum_teu: 2, sum_weight: 18585, count_shipments: 1},
{country:"Colombia", distrinct_port_nme:"Houston, Texas", sum_teu:14, sum_weight: 95995, count_shipments: 7},
{country:"Brazil", distrinct_port_nme:"Long Beach, California", sum_teu: 2, sum_weight: 18584, count_shipments: 1},
{country:"China", distrinct_port_nme:"Long Beach, California", sum_teu: 2, sum_weight: 19180, count_shipments: 1},
{country:"Colombia", distrinct_port_nme:"Long Beach, California", sum_teu:12, sum_weight:117873, count_shipments: 6},
{country:"Singapore", distrinct_port_nme:"Long Beach, California", sum_teu: 6, sum_weight: 77176, count_shipments: 4},
{country:"Belgium", distrinct_port_nme:"Los Angeles, California", sum_teu: 2, sum_weight: 17780, count_shipments: 1},
{country:"Brazil", distrinct_port_nme:"Los Angeles, California", sum_teu: 2, sum_weight: 18584, count_shipments: 1},
{country:"Colombia", distrinct_port_nme:"Los Angeles, California", sum_teu: 7, sum_weight: 52046, count_shipments: 5},
{country:"Hong Kong", distrinct_port_nme:"Los Angeles, California", sum_teu: 2, sum_weight: 19180, count_shipments: 1},
{country:"India", distrinct_port_nme:"Los Angeles, California", sum_teu:48, sum_weight:460563, count_shipments:24},
{country:"Singapore", distrinct_port_nme:"Los Angeles, California", sum_teu:12, sum_weight:115384, count_shipments: 6},
{country:"Brazil", distrinct_port_nme:"New York, New York", sum_teu: 4, sum_weight: 27032, count_shipments: 2},
{country:"Colombia", distrinct_port_nme:"New York, New York", sum_teu: 8, sum_weight: 42885, count_shipments: 4},
{country:"India", distrinct_port_nme:"New York, New York", sum_teu:14, sum_weight:129116, count_shipments: 7},
{country:"Singapore", distrinct_port_nme:"New York, New York", sum_teu:42, sum_weight:560628, count_shipments:27},
{country:"Brazil", distrinct_port_nme:"Newark, New Jersey", sum_teu: 2, sum_weight: 18584, count_shipments: 1},
{country:"Colombia", distrinct_port_nme:"Newark, New Jersey", sum_teu:83, sum_weight:785372, count_shipments:42},
{country:"India", distrinct_port_nme:"Newark, New Jersey", sum_teu:62, sum_weight:587654, count_shipments:31},
{country:"Brazil", distrinct_port_nme:"Norfolk, Virginia", sum_teu: 8, sum_weight: 33622, count_shipments: 4},
{country:"India", distrinct_port_nme:"Norfolk, Virginia", sum_teu: 2, sum_weight: 17780, count_shipments: 1},
{country:"Brazil", distrinct_port_nme:"Philadelphia, Pennsylvania", sum_teu: 2, sum_weight: 20160, count_shipments: 1}
];
//margins
var margin = {top: 20, right: 90, bottom: 30, left: 100, left_padding: 100},
width = 700 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//axes and color scale
var x = d3.scale.ordinal()
.rangeBands([0, width], .2),
y = d3.scale.ordinal()
.rangeBands([height,0], .2),
z = d3.scale.linear().range(["lightgrey", "steelblue"]);
var xStep = .5,
yStep = 50;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + 0 + "," + margin.top + ")");
//Compute the scale domains.
x.domain(buckets.map(function(d){return d.country}));
y.domain(buckets.map(function(d){return d.distrinct_port_nme}));
z.domain([0, d3.max(buckets.map(function(d){return d.count_shipments}))]);
//Display the tiles for each bucket.
svg.selectAll(".tile")
.data(buckets)
.enter().append("rect")
.attr("class", "tile")
.attr("x", function(d) { return x(d.country) + margin.left+margin.left_padding; })
.attr("y", function(d) { return y(d.distrinct_port_nme); })
.attr("width",x.rangeBand())
.attr("height",y.rangeBand())
.style("stroke","goldenrod")
.style("fill", function(d) { return z(d.count_shipments); })
.on("mouseover", function() { d3.select(this).classed("active", true ) }) //classed("active",boolean) not working
.on("mouseout", function() { d3.select(this).classed("active", false) });
// .on("mouseover", function() { d3.select(this).style("fill", "aliceblue");}); //this change work fine
// .on("mouseout", function(){d3.select(this).style("fill", "white");}); //this change work fine
svg.selectAll("text")
.data(buckets)
.enter().append("text")
.text("text")
.attr("x", function(d) { return x(d.country) + margin.left + margin.left_padding + x.rangeBand()/2; })
.attr("y", function(d) { return y(d.distrinct_port_nme) + y.rangeBand()/2; })
.attr("dx",0)
.attr("dy",".35em")
.attr("text-anchor","middle")
.style("fill","black").attr("font-size","14").attr("font-weight","Bold")
.text( function(d) { return d.count_shipments; });
//Add a legend for the color values.
var legend = svg.selectAll(".legend")
.data(z.ticks(6).slice(1).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + 0 + "," + (10 + i * 20) + ")"; });
legend.append("rect")
.attr("width", 20)
.attr("height", 20)
.style("fill", z);
legend.append("text")
.attr("x", 26)
.attr("y", 10)
.attr("dy", ".35em")
.text(String);
svg.append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", 0)
.attr("dy", ".35em")
.text("count_shipments");
//Add an x-axis with label.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+ (margin.left+margin.left_padding) + "," + height + ")")
.attr("text_anchor", "top")
.call(d3.svg.axis().scale(x).orient("bottom"))
.append("text")
.attr("class", "label")
.attr("x", width-10)
.attr("y", -5)
.attr("text-anchor", "end")
.text("Country");
//Add a y-axis with label.
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+ (margin.left+margin.left_padding) + "," + 0 + ")")
.attr("text-anchor","right")
.call(d3.svg.axis().scale(y).orient("left"))
.append("text")
.attr("class", "label")
.attr("y", 3)
.attr("dy", ".71em")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.text("distrinct_port_nme");
</script>
</body>
</html>
InformationsquelleAutor glynnsc | 2013-03-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
BEARBEITEN
First off, du hattest Recht, dein CSS ist etwas abseits.
werden sollte:
Dann, in der Art, wie ich unten erklärt, die Füllung, die Sie anwenden, um das element mit
endet Vorrang vor der Füllung durch die
active
Klasse.Jedoch, im Gegensatz zu dem, was ich ursprünglich vorgeschlagen, Sie können es umgehen, indem man einfach tauschen
style
mitattr
, so müssen Sie:(wahrscheinlich sollte dies für Schlaganfall sowie).
Hier ist ein aktualisiert, Arbeits-jsFiddle
ORIGINAL-BEITRAG
Ich vermute, es funktioniert, wie es soll -- d.h. die Klasse "aktiv" mit der dazugehörigen füllen wird Hinzugefügt/entfernt werden angemessen-und Sie würde in der Lage sein zu überprüfen, diese mit der rechten Maustaste an und untersuchen Sie das element in dev-tools.
Ich denke, das eigentliche problem ist, dass Sie auch ein füllen Sie direkt auf das element (eine Zeile, bevor Sie Ihre
.on("mouseover"...)
nennen), die IMMER Vorrang vor der Füllung, die durch Ihre Klasse. In der Regel in CSS könnten Sie (nicht sagen, dass man sollte) verwenden Sie die!important
Stichwort zu erzwingen, akzeptieren Sie die Füllung durch die Klasse. Aber ich bin mir ziemlich sicher, dass nicht die Arbeit mit SVG (im Gegensatz zu normalen HTML-Elementen).So, ich denke, deine einzige option ist:
Hoffe das funktioniert....
fix diese Geige jsfiddle.net/glynnsc/WEsUe
Es habe! Siehe meine edits.
Wie würde das ablaufen?
Gott sei Dank, Sie beantwortet diesen Beitrag ... Es funktioniert für mich ... du hast mich gerettet ... danke danke 🙂
InformationsquelleAutor meetamit