Я новичок в D3, но люблю ее до сих пор. Но я знаю, что у моих решений нет ... элегантности.Нажмите таблицу, обновите строку, наведите указатель мыши на линию, обновите таблицу
Я пытаюсь иметь 2 элемента управления, таблицу и график, отображающий данные, представленные ячейками таблицы. Если вы нажмете на ячейку в таблице, соответствующая строка будет выделена. Если вы наведите указатель мыши на линию, связанная ячейка таблицы изменит цвет. В конце концов будет третий элемент управления, показывающий подробные данные, специфичные для этого cel. К сожалению, мне удалось выполнить эту работу, если я использую статические вызовы для функции обновления. Если я пытаюсь быть умным и динамичным, все это ломается.
Я попытался свести к минимуму мой пример настолько, насколько могу ниже. Линия таблицы click-> update работает, потому что вызовы SelectData(), которые обновляют все, используют постоянные данные. Однако наведение на линии не работает. В конце концов мне нужно, чтобы таблица была более динамичной, но пока, как я могу это исправить?
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.lineDefault {
fill: none;
stroke: red;
stroke-width: 1.5px;
stroke-dasharray: 4,4;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<div id="wrap">
<table>
<tr>
<td id="dataBlock" onclick="SelectData(0)">1</td>
<td id="dataBlock" onclick="SelectData(1)">2</td>
</tr>
<tr>
<td id="dataBlock" onclick="SelectData(2)">3</td>
<td id="dataBlock" onclick="SelectData(3)">4</td>
</tr>
</table>
<div>
<svg class="chart"></svg>
</div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 600, height = 600;
var maxx = 100,
maxy = 100;
var linedata = {};
linedata[0] = [[0, 50 ],[ 50, 60 ],[100, 100]];
linedata[1] = [[0, 40 ],[ 40, 40 ],[100, 90 ]];
linedata[2] = [[0, 20 ],[ 50, 30 ],[100, 90 ]];
linedata[3] = [[0, 0 ],[ 60, 30 ],[100, 30 ]];
var activeElement = 0;
var graphlines = {};
var numlines = 0;
chart = d3.select(".chart").attr("viewBox", "0 0 600 600").append("g");
var x = d3.scale.linear().domain([0, maxx]).range([0, width]);
var y = d3.scale.linear().domain([0, maxy]).range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
for (var i = 0; i < 4; i++) {
graphlines[i] = chart
.append("path")
.datum(linedata[i])
.attr("class", "lineDefault")
.attr("id", "linedata")
.attr("d", line)
.on("mouseover", SelectData(i));
numlines++;
}
function SelectData(n) {
d3.selectAll("td").transition()
.style("background-color", function(d, i) {
return i == n ? "#c99" : "#fff";
});
activeElement = n;
for (var i = 0; i<numlines; i++) {
if (i == n) {
graphlines[i]
.style("stroke-dasharray", "1,0")
.transition()
.style("stroke-width", "3")
.style("stroke", "steelblue");
} else {
graphlines[i]
.style("stroke-dasharray", "4,4")
.transition()
.style("stroke-width", "1.5")
.style("stroke", "red");
}
}
}
</script>
MouseClick о влиянии таблицы на линии, то Mouseover на линиях не влияет на таблицу. Кроме того, я соглашусь на любые издевательства над моей элегантностью и указателями на их фиксацию.
P.S. Если вам не нравится эффект скольжения, когда линии меняются от пунктирной к твердой, определите свойство «stroke-dasharray» для сплошных линий, имеющих такую же общую длину, что и штриховая линия. Например. с тире штриховки, составляющей '4 4', сплошная линия с одинаковой длиной равна' 8 0'. – AmeliaBR
И один последний комментарий: ** значения 'id' должны быть уникальными для всей веб-страницы! ** Вы не можете использовать' id' для группировки похожих элементов, для чего предназначены классы. Вот почему я изменил 'id' на' class' в нескольких частях вашего кода. – AmeliaBR
Я большой поклонник вашей @AmeliaBR! Большое вам спасибо за то, что нашли время, чтобы написать такие четкие, подробные и исчерпывающие объяснения ... не говоря уже о дополнительной миле, которую вы идете в приготовлении некоторых действительно твердых примеров. Такие люди, как вы, Ларс и многие другие (я бы хотел, чтобы я мог их перечислить), что частые сообщества Dover stackoverflow являются абсолютной идеей большой информации и доброй воли. Еще раз спасибо! – FernOfTheAndes