个人中心
gpt4 book ai didi

javascript - d3.select() 在转换后不会立即工作

转载 作者：行者123 更新时间：2023-12-02 14:41:55 25 4
gpt4 key购买 nike

我一直在努力使一段文本可点击。我可以使其他文本可单击，并且单击此文本后该函数将按预期运行。麻烦的文本嵌套在某些东西中，我认为这就是为什么它的行为与 .on() 不同。我添加了id到文本片段，以便于选择。

现在我终于有了一段代码，它可以使文本可点击，并且一切都按其应有的方式执行 - 但前提是在 Chrome 开发者控制台中输入时! :

d3.select("#patext").on("click", function() {toggleLine();})

一旦在 Chrome 控制台中输入此内容，一切都会正常运行，但在 index.html 中文件它什么也不做。 'patext' 是我之前给它的 id。 index.html包含 <style></style>部分位于顶部，然后位于 <body></body> 下方。体内有两个<script></script>第一个加载 d3.js，第二个是我的脚本。 d3.select()上面的行就在 toggleLine() 的函数定义下方。

已阅读建议 here和 here我的脚本位于正文中，加载 d3 的脚本是与主脚本分开的脚本。有什么想法吗？

根据要求，这里是原始 240 行中的 80 行，它基于 Bostock 脚本，希望我没有删除任何重要内容

<!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>

最佳答案

结果是有一个转换并且延迟了 DOM 操作，这使得事件监听器在创建 DOM 元素之前绑定(bind)。

A transition is a special type of selection where the operators apply smoothly over time rather than instantaneously. You derive a transition from a selection using the transition operator. While transitions generally support the same operators as selections (such as attr and style), not all operators are supported; for example, you must append elements before a transition starts. A remove operator is provided for convenient removal of elements when the transition ends.

解决方案是在transition()之前绑定(bind)click监听器。

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>

    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) {
      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;
        // ...

        city.append("text")
          .datum(function(d) {
            return {
              name: d.name,
              value: d.values[d.values.length - 1]
            };
          })
          .attr("id", function(d) {
            console.log((d.name).slice(0, 2) + "text");
            return ((d.name).slice(0, 2) + "text");
          });  // for click fn
          // bind listener before transition
          .on("click", function(d){
              if(d3.select(this).attr('id') === "patext") {
              toggleLine();
           }
          .style("stroke", function(d) {
            return color(d.name);
          })
          .transition() 
          .attr("x", 3)
          .attr("dy", ".35em")
          .text(function(d) {
            return d.name;
          })
      });

    });
  </script>
</body>

这允许您的代码在 DOM 完全加载后执行。

参见$(document).ready equivalent without jQuery了解实现此目的的其他选项。

关于javascript - d3.select() 在转换后不会立即工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36940587/

25 4 0
文章推荐： javascript - 如何在点击时更改div中的内容？
文章推荐： javascript - Grunt - 忽略隐藏文件？
文章推荐： javascript - 在 JavaScript 中使用计算机视觉缩略图 API 响应数据
文章推荐： javascript - 提交前创建文本区域预览
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com