d3滑动条为什么没有出现

Question

滑动条为什么没有出现
完整代码如下：

<div id="chart_3" class="echart t_btn7" style="width:100%;height: 200px;"></div>
<div class="slider_container">
  <div id="sliderone"></div>
  <div id="value-simple"></div>
</div>
<script>
    var margin = { top: 20, right: 20, bottom: 30, left: 100 };
    var width = 1100 - margin.left - margin.right;
    var height = 600 - margin.top - margin.bottom;

    var content = d3.select('#chart_3')
        .append('svg')
        .attr('id','box')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('id', 'content')
        .style('transform', `translate(${margin.left}px,${margin.top}px)`)

    const time = 6
    var slider_one = d3.sliderBottom()
        .min(new Date(2023, 11, 20, time))
        .max(new Date(2023, 11, 20, time + 1))
        .width(800)
        .ticks(10)
        .default(0.5)
        .tickFormat(d3.timeFormat('%M:%S'))
        .fill('blue')
        .on('onchange', function (val) {
            d3.select('#value-simple').text(val);
            console.log(val)
        })

    var gSimple = d3.select('#sliderone')
                    .append('g')
                    .attr('transform', 'translate(30,120)')
                    .call(slider_one);

    d3.select('#value-simple').text((slider_one.value()));

Answer 1

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/773078
• 你也可以参考下这篇文章：d3实现网络拓扑图可视化展示，动态修改数据
• 除此之外, 这篇博客: d3 树形图的使用中的 d3 树形图的使用 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  首先声明一下，这个树形图的使用方法是在

  http://wiki.jikexueyuan.com/project/d3wiki/tree.html

  的例子上添加了一小部分功能，大家可以先去看一下原版的实现，然后再来看这篇，不然我都不知道我在说什么。

  原文章最后的树状图如下：
  
  实现这个图的源码可以在这个链接的最下面下载。

  我们想要实现的那一小部分功能是：举例，点击桂林圆点，圆点变红，同时桂林节点的子节点收回，再点击广西圆点，圆点变红，同时广西节点的子节点收回。再次点击广西节点，圆点填充为空，同时展开子节点，这时候的桂林节点的子节点依然收回，也就是桂林节点的颜色为红。

  javascript代码如下，主要看注释部分，其他的内容看原文章：

  <script>
  var width = 500;
  var height = 500;
  
  
  
  var tree = d3.layout.tree()
  .size([width, height-200])
  .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });
  
  var diagonal = d3.svg.diagonal()
      .projection(function(d){return [d.y,d.x];});
  
  var svg = d3.select("body").append("svg")
      .attr("width",width)
      .attr("height",height)
      .append("g")
      .attr("transform","translate(40,0)");
  
  var draw = function(error,root){
      d3.select("svg").remove();
  
      var svg = d3.select("body").append("svg")
          .attr("width",width)
          .attr("height",height)
          .append("g")
          .attr("transform","translate(40,0)");
  
      var nodes = tree.nodes(root);
      var links = tree.links(nodes);
  
      **//用来为每一个节点的children添加一个备份**
      for(var i=0;i<nodes.length;i++){
          if(nodes[i].children) {
              nodes[i].childrenB = nodes[i].children;
          }
      }
  
      console.log(nodes);
      console.log(links);
  
      var link = svg.selectAll(".link")
          .data(links)
          .enter()
          .append("path")
          .attr("class", "link")
          .attr("d", diagonal);   
  
      var node = svg.selectAll(".node")
          .data(nodes)
          .enter()
          .append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
          .on("click",function(d){ //为节点添加click事件
              if(d.children){//如果这个节点有children属性，则删除并重新绘图
                  delete d.children;
                  draw(error,root);
              }
              else{//否则的话，检测这个节点是否有childrenB属性，有的话为这个节点添加children属性，并重新绘图
                  if(d.childrenB){
                      d.children=d.childrenB;
                      draw(error,root);
                  }
              }
          })
  
      node.append("circle")
          .attr("r", 4.5)
          .style("fill",function(d){
              if(d.childrenB&&!d.children){//如果节点的childrenB属性为真，并且children属性为假时表示这个节点有子节点，但是节点收回了，因此填充红色。
                  return "red";
              }
              else{
                  return "white";
              }
          })
  
  
      node.append("text")
          .attr("dx", function(d) { return d.children ? -8 : 8; })
          .attr("dy", 3)
          .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
          .text(function(d) { return d.name; });
  };
  d3.json("city_tree.json", draw);
  
  </script>
  

  运行结果图图下：
  
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^