个人中心
gpt4 book ai didi

javascript - 带 Bootstrap 工具提示的 d3 : titles not working with data updating

转载 作者：行者123 更新时间：2023-11-30 16:46:30 24 4
gpt4 key购买 nike

我正在创建一个条形图，将鼠标悬停在每个矩形上会生成一个工具提示。所以我为每个矩形创建了一个“标题”属性，这是有效的

var hist = this.svg.selectAll(".hist")
                   .data(displayData, function(d) { return d.time; });
hist.enter().append("rect")
            .attr('title', function (d) { 
              return tooltipDateFmt(d.time) + ":  " + d.value.toFixed(1) + " gallons"; })
            .attr("class", "hist");

hist.transition().duration(400)
                .attr("x", function (d) { return x(d.time); })
                .attr("y", function (d) { return y(d.value); })
                .attr("width", function (d) { return 2.5; })
                .attr("height", function (d) { return height - y(d.value); });
hist.exit().remove();

$('svg .hist').tooltip({
        'container': 'body',
        'placement': 'top'
      });

但是当我通过单击按钮更新矩形并将一组新数据绑定(bind)到它们时，我意识到标题没有更新。所以我把标题放在更新阶段

var hist = this.svg.selectAll(".hist")
                   .data(displayData, function(d) { return d.time; });
hist.enter().append("rect")
            .attr("class", "hist");

hist.transition().duration(400)
                .attr('title', function (d) { 
                  return tooltipDateFmt(d.time) + ":  " + d.value.toFixed(1) + " gallons"; })
                .attr("x", function (d) { return x(d.time); })
                .attr("y", function (d) { return y(d.value); })
                .attr("width", function (d) { return 2.5; })
                .attr("height", function (d) { return height - y(d.value); });
hist.exit().remove();

但这没有显示任何工具提示。谁能告诉我我做错了什么？

最佳答案

bootstrap 工具提示将一个 div(带有原始标题)插入到每个工具提示的 DOM 中，然后在鼠标悬停时隐藏/显示它。稍后更改标题不会更改插入的 div。

我不会设置标题，而是使用title option and return a dynamic title . 

  $('svg .hist').tooltip({
    'container': 'body',
    'placement': 'top',
    'title': function(){
       var d = d3.select(this).datum(); // get data bound to rect
       return tooltipDateFmt(d.time) + ":  " + d.value.toFixed(1) + " gallons"; });
    }
  });

这是一个工作示例:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

    </style>
  </head>

  <body>
    <button id="changeTips">Change Tips</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

var data = [
    {
      x: 1660,
      y: 1
    },{
      x: 1670,
      y: 2
    },{
      x: 1680,
      y: 3
    },{
      x: 1690,
      y: 4
    }
  ];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
  .range([0,width])
  .domain([1650, 1700]);

var y = d3.scale.linear()
    .range([height, 0])
    .domain([0,5]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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(" + margin.left + "," + margin.top + ")");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
      
  var barWidth = (width / xAxis.ticks()[0]);

  var bars = svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    /*
     .attr('title', function (d) { 
       return d.y;
     })
    */
    .attr("class","bar")
    .attr("width", barWidth)
    .attr("x", function(d) { return x(d.x) - (barWidth / 2); })
    .attr("y", function(d) { return y(d.y); })
    .attr("height", function(d) { return height - y(d.y); });
    
    
    var showY = true;
    $('svg .bar').tooltip({
        'container': 'body',
        'placement': 'top',
        'title': function(){
          if (showY)
            return (d3.select(this).datum().y);
          else
            return (d3.select(this).datum().x);
        }
      });

    d3.select('#changeTips').on('click',function(){
      showY = !showY;
    });
    
    </script>
  </body>

</html>

关于javascript - 带 Bootstrap 工具提示的 d3 : titles not working with data updating，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31166089/

24 4 0
文章推荐： c# - Returnvalue with ref 与两个 out Values 相比
文章推荐： c - libuv在建立多个连接时速度慢？
文章推荐： c# - 为解决方案文件夹外的项目设置 NuGet 包文件夹
文章推荐： c - 如何在 ubuntu 中安装 dos.h
行者123
个人简介

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

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