Я изо всех сил пытаюсь сделать кусок текста интерактивным. Я мог бы сделать другой текст кликабельным, и функция вела себя так, как ожидалось, после нажатия этого текста. Тревожный текст был вложен внутри чего-то, я думаю, именно поэтому он не вел себя так же с .on(). Я добавил id к фрагменту текста, чтобы его было легко выбрать.d3.select() не работает сразу после перехода
Теперь у меня есть кусок кода, который делает текст кликабельным, и все работает так, как должно, - но только при входе в консоль разработчика Chrome! :
d3.select("#patext").on("click", function() {toggleLine();})
После этого вводится в Chrome консоли все работает отлично, но в файле index.html он ничего не делает. 'patext' - это идентификатор, который я дал ранее. index.html содержит раздел <style></style> вверху, затем под <body></body>. Внутри тела находятся два <script></script> первых нагрузок d3.js, второй - мой сценарий. Строка d3.select() приведена ниже определения функции toggleLine().
Уже прошли предложения here и here, а мой скрипт находится в теле, а скрипт для загрузки d3 - отдельный для основного скрипта. Есть идеи?
В соответствии с просьбой, вот 80 из первоначальных 240 линий это на основе сценария Босток надеюсь, что я не удалить ничего важного
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
/* background-color: #ffeda0;*/
}
.axis path
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var parseDate = d3.time.format("%Y-%m-%d").parse;
var x = d3.time.scale().range([0, width]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
d3.csv("myfile.csv", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]}; // plus casts a string '55' to a number 55
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg.append("rect") // fill it a colour
.attr("width", 830)
.attr("height", "100%")
.attr("fill", "AliceBlue");
svg.append("g")
.classed("axis x", true)
.call(xAxis2);
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.style("stroke", function(d) {return color(d.name); })
.attr("class", "line")
.attr("id", function(d) {console.log((d.name).slice(0,3));return (d.name).slice(0,3);}) // for click fn below.
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.style("stroke", function(d) {return color(d.name); })
.transition()
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; })
.attr("id", function(d) {console.log((d.name).slice(0,2)+"text");return ((d.name).slice(0,2)+"text");}) // for click fn
});
function toggleLine() {
var active = gol.active ? false : true,
newOpacity = active ? 0 : 1;
d3.select("#gol").style("opacity", newOpacity);
gol.active = active;}
document.addEventListener("DOMContentLoaded", function(event) {
//... your code
d3.select("#patext").on("click", function() {toggleLine();});
//... more of your code
});
</script>
</body>
Вы можете разместить весь свой html-файл, чтобы показать структуру? Я подозреваю, что ваш код выполняется до инициализации DOM. – paradite
Скорее всего, DOM не готов, когда ваш скрипт запускается. Попробуйте поместить его в событие 'DOMContentLoaded'. – JCOC611
Я просто добавил это в нижней части, как вы сказали @ JCOC611: ' 'это вызвало выражение« DOM полностью загружено и проанализировано »для печати в консоли разработчика, но, к сожалению, мой текст не стал доступен для кликов. Просто чтобы проверить, что я не представлял, что я копировал и вставлял эту последнюю строку в консоль, и нажал кнопку ввода, и он был кликабельным и функциональным, как описано выше. – cardamom