jquery插件将数据绑定到工具提示（poshy tip）

更新时间：2022-10-26 16:38:53

创建存储数据的变量：

  var dataWeeks = [Week 1：32< br>第2周：54< br>第3周：19< br>第4周：12，
第2周：第14周第14周第14周第14周第14周第14周第14周第14周第14周第14周第14周第12周第14周：23，
第1周：65< br>第2周：53< br>第3周：16< br>第4周：11，
 // ... 
] ;

每个月的数据都是单个字符串。然后，使用我的其他答案中的代码，使用索引在工具提示中显示数据在 dataWeeks 中选择月份（0是1月，1是2月，2月是3月等...）：

  text.on（mousemove，function（d，i）{
 tooltip.html（dataWeeks [i]）; 
 // ...

这是演示：

 'use strict'; var dataset = [1,1,1,1,1,1 ，1,1,1,1,1,1]; // let colors = ['＃8dd3c7'，'＃ffffb3'，'#bebada'，'＃fb8072'，'＃80b1d3'，'＃fdb462' ＃＃b3de69'，'＃fccde5'，'＃d9d9d9'，'＃bc80bd']; let colors = ['＃67001f'，'＃b2182b'，'＃d6604d'，'＃f4a582'，'＃fddbc7' '＃e0e0e0'，'#bababa'，'＃878787'，'＃4d4d4d'，'＃1a1a1a'，'white'，'white']; var months = ['January  -  2016'，'February-2016' 'March  -  2016'，'April  -  2016'，'May  -  2016'，'June-2016'，'July-2016'，'August-2016'，'September-2016'，'October-2016'，'November -  2016'，'December-2016']; var dataWeeks = [Week 1：32< br> Week 2：54< br> Week 3：19< br> Week 4：12，Week 1：22& ;第2周：14周第3周：12周第4周：03，第1周：35周第2周：14周第3周：11周第4周：23，第1周：65周第2周：53周第3周：16周第4周：11，第1周：11周第2周：52周第3周：22周4：12，第1周：09第2周：44周第3周：59周第4周：87周，第1周：42周第2周：76周第3周：69周第4周：33周，第1周：11周第2周：65周第3周：69周第4周：33周，第1周：99周第2周： 66周第3周：19周第4周：84，第1周：16周第2周：66周第3周：11周第4周：86周，第1周：21周 ;第2周：52周第3周：12周第4周：37，第1周：第90周第2周：69周第3周：19周第4周：17 ]; var width = document.querySelector（'。chart-wrapper'）。offsetWidth，height = document.querySelector（'。chart-wrapper'）。offsetHeight，minOfWH = Math.min（width，height）/ 2，initialAnimDelay = 300，arcAnimDelay = 150，arcAnimDur = 3000，secDur = 1000，secIndividualdelay = 150; var radius = undefined; //计算宽度和高度的最小值以设置图表radiusif（minOfWH> 200）{radius = 200;} else {radius = minOfWH;} // append svgvar svg = d3.select（'。chart-wrapper'）append（'svg'）。attr（{'width'：width， height'：height，'class'：'pieChart'}）append（'g'）; svg.attr（''''''''''+ width / 2 + '}）; //用于绘制slicesvar arc = d3.svg.arc（）。outerRadius（radius * 0.6）.innerRadius（radius * 0.45）; //用于标签和polylinesvar outerArc = d3.svg.arc （半径* 0.85）.outerRadius（半径* 0.85）; // d3颜色生成器//让c10 = d3.scale.category10（）; var tooltip = d3.select（body）append（div）。 attr（class，tooltip）。style（opacity，0）; var pie = d3.layout.pie（）value（function（d）{return d;}）; var draw = function draw ）{svg.append（g）。attr（class，lines）; svg.append（g）。attr（class，slices）; svg.append（g）。attr（class，labels）; // define slice var slice = svg.select（'。slices'）。datum（dataset）.selectAll（'path'）。data（pie）; slice.enter（）。append（'path'）。attr（{'fill'：function fill（d，i）{return colors [i];}，'d'：arc，'stroke-width'：'25px '}）。attr（'transform'，function（d，i）{return'rotate（-180，0，0）';}）。style（'opacity'，0）.transition d（i）{return i * arcAnimDelay + initialAnimDelay;}。duration（arcAnimDur）.ease（'elastic'）。style（'opacity'，1）.attr（'transform'，'rotate ）'）; slice.transition（）。delay（function（d，i）{return arcAnimDur + i * secIndividualdelay;}）duration（secDur）.attr（'stroke-width'，'5px'）; var midAngle = function midAngle（d）{return d.startAngle +（d.endAngle  -  d.startAngle）/ 2; }; var text = svg.select（。labels）。selectAll（text）。data（pie（dataset））; text（）。append（'text'）。attr（'dy'，'0.35em'）。style（opacity，0）.attr（cursor，default ，function（d，i）{return colors [i];}）text（function（d，i）{return months [i];} this切片的质心var pos = outerArc.centroid（d）; //定义文本标签的左右对齐pos [0] = radius *（midAngle（d）

  body {overflow ：隐藏font-size：16px;}。chart-wrapper {width：100％;高度：100％; background-color：＃0d0d0d; position：absolute;} path {stroke：＃0d0d0d; / * stroke-width：5px; * / cursor：pointer; -webkit-transition：fill 250ms; transition：fill 250ms;} path：hover {/ * stroke-width：10px; * / fill：#fff;} text {font-size：.8em; text-transform：uppercase; letter-spacing：.5px;} polyline {fill：none; stroke：#fff; stroke-width：2px; stroke-dasharray：5px;} button {position：absolute; top：20px; left：820px; text-transform：uppercase; padding：5px 10px; outline：none; font-size：.6em;背景颜色：黑色; color：#fff; border：1px solid #fff; letter-spacing：1px; -webkit- transition：all 250ms; transition：all 250ms;} button：hover {background-color：#fff;颜色：＃0d0d0d; box-shadow：0 0 2px #fff;} button：active {opacity：0.5;} div.tooltip {position：absolute; padding：4px;背景：白色; border：1px solid black; border-radius：2px; font-size：14px;}

 <！DOCTYPE html&gt ;< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en>< head> < title>疯狂饼图< / title> < meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-1/> <！ -  Tooltip classes  - > < link rel =stylesheethref =http://vadikom.com/demos/poshytip/src/tip-skyblue/tip-skyblue.csstype =text / css/> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css> < link rel =stylesheethref =css / style.css>< / head>< body> < div class =chart-wrapper>< / div> < button onclick ='replay（）'> Replay< / button> < div class =texttdata-tip =this is the data。>< / div> < script src ='http：//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'>< / script> < script src =js / index.js>< / script>< / body>< / html>  >  
In the below code ,I have a chart where I want to create a tooltip/infotip.

I have used jquery plugin (poshy tip :http://vadikom.com/demos/poshytip/#download)

Once I hover over the months,I would like to see the weeks.Like it is visible when u hover over "January" and "February" in the below code output.

Now the issue is how do I bind the tooltip to the months in the chart.

Kindly help.God bless.



'use strict';

var dataset = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

// let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd'];
let colors = ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a', 'white', 'white'];
var months = ['January - 2016', 'February - 2016', 'March - 2016', 'April - 2016', 'May - 2016', 'June - 2016', 'July - 2016', 'August - 2016', 'September - 2016', 'October - 2016', 'November - 2016', 'December - 2016'];

var width = document.querySelector('.chart-wrapper').offsetWidth,
  height = document.querySelector('.chart-wrapper').offsetHeight,
  minOfWH = Math.min(width, height) / 2,
  initialAnimDelay = 300,
  arcAnimDelay = 150,
  arcAnimDur = 3000,
  secDur = 1000,
  secIndividualdelay = 150;

var radius = undefined;

// calculate minimum of width and height to set chart radius
if (minOfWH > 200) {
  radius = 200;
} else {
  radius = minOfWH;
}

// append svg
var svg = d3.select('.chart-wrapper').append('svg').attr({
  'width': width,
  'height': height,
  'class': 'pieChart'
}).append('g');

svg.attr({
  'transform': 'translate(' + width / 2 + ', ' + height / 2 + ')'
});

// for drawing slices
var arc = d3.svg.arc().outerRadius(radius * 0.6).innerRadius(radius * 0.45);

// for labels and polylines
var outerArc = d3.svg.arc().innerRadius(radius * 0.85).outerRadius(radius * 0.85);

// d3 color generator
// let c10 = d3.scale.category10();

var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

var pie = d3.layout.pie().value(function(d) {
  return d;
});

var draw = function draw() {

  svg.append("g").attr("class", "lines");
  svg.append("g").attr("class", "slices");
  svg.append("g").attr("class", "labels");

  // define slice
  var slice = svg.select('.slices').datum(dataset).selectAll('path').data(pie);
  slice.enter().append('path').attr({
    'fill': function fill(d, i) {
      return colors[i];
    },
    'd': arc,
    'stroke-width': '25px'
  }).attr('transform', function(d, i) {
    return 'rotate(-180, 0, 0)';
  }).style('opacity', 0).transition().delay(function(d, i) {
    return i * arcAnimDelay + initialAnimDelay;
  }).duration(arcAnimDur).ease('elastic').style('opacity', 1).attr('transform', 'rotate(0,0,0)');

  slice.transition().delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).duration(secDur).attr('stroke-width', '5px');

  var midAngle = function midAngle(d) {
    return d.startAngle + (d.endAngle - d.startAngle) / 2;
  };

  var text = svg.select(".labels").selectAll("text").data(pie(dataset));

  text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).attr("cursor", "default").style('fill', function(d, i) {
    return colors[i];
  }).text(function(d, i) {
    return months[i];
  }).attr('transform', function(d) {
    // calculate outerArc centroid for 'this' slice
    var pos = outerArc.centroid(d);
    // define left and right alignment of text labels
    pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1);
    return 'translate(' + pos + ')';
  }).style('text-anchor', function(d) {
    return midAngle(d) < Math.PI ? "start" : "end";
  }).transition().delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).duration(secDur).style('opacity', 1);


  var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset));

  polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) {
    var pos = outerArc.centroid(d);
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
    return [arc.centroid(d), arc.centroid(d), arc.centroid(d)];
  }).transition().duration(secDur).delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).attr('points', function(d) {
    var pos = outerArc.centroid(d);
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
    return [arc.centroid(d), outerArc.centroid(d), pos];
  });
};

draw();

var button = document.querySelector('button');

var replay = function replay() {

  d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
  d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
  d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();

  setTimeout(draw, 800);
};


body {
  overflow: hidden;
  font-size: 16px;
}
.chart-wrapper {
  width: 100%;
  height: 100%;
  background-color: #0d0d0d;
  position: absolute;
}
path {
  stroke: #0d0d0d;
  /* stroke-width: 5px; */
  cursor: pointer;
  -webkit-transition: fill 250ms;
  transition: fill 250ms;
}
path:hover {
  /* stroke-width: 10px; */
  fill: #fff;
}
text {
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .5px;
}
polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 5px;
}
button {
  position: absolute;
  top: 20px;
  left: 820px;
  text-transform: uppercase;
  padding: 5px 10px;
  outline: none;
  font-size: .6em;
  background-color: black;
  color: #fff;
  border: 1px solid #fff;
  letter-spacing: 1px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
button:hover {
  background-color: #fff;
  color: #0d0d0d;
  box-shadow: 0 0 2px #fff;
}
button:active {
  opacity: 0.5;
}
div.tooltip {
  position: absolute;
  padding: 4px;
  background: white;
  border: 1px solid black;
  border-radius: 2px;
}


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Crazy Pie Chart</title>
  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

  <!-- Tooltip classes -->

  <link rel="stylesheet" href="http://vadikom.com/demos/poshytip/src/tip-skyblue/tip-skyblue.css" type="text/css" />


  <!-- jQuery and the Poshy Tip plugin files -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://vadikom.com/demos/poshytip/src/jquery.poshytip.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


  <link rel="stylesheet" href="css/style.css">

  <script type="text/javascript">
    $(function() {

      $('.demo-tip-skyblue').poshytip({
        className: 'tip-skyblue',
        bgImageFrameSize: 9,
        offsetX: 0,
        offsetY: 20
      });
    });
  </script>

</head>

<body>

  <div id="holder">
    <div id="content">
      <!-- #demo-tip-skyblue -->
      <p><a class="demo-tip-skyblue" title="<u>Weekly Information </u> <br> Week 1 - 45 <br> Week 2 - 56 <br> Week 3 - 67 <br> Week 4 - 77" href="#">January- 2016</a>
      </p>

      <p><a class="demo-tip-skyblue" title="<u>Weekly Information </u> <br> Week 1 - 1 <br> Week 2 - 5 <br> Week 3 - 6 <br> Week 4 - 7" href="#">February- 2016</a>
      </p>
    </div>
  </div>


  <div class="chart-wrapper"></div>
  <button onclick='replay()'>Replay</button>
  <div class="textt" data-tip="this is the data ."></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>






Creating a variable to store the data:
var dataWeeks = ["Week 1: 32<br>Week 2: 54<br>Week 3: 19<br>Week 4: 12",
    "Week 1: 22<br>Week 2: 14<br>Week 3: 12<br>Week 4: 03",
    "Week 1: 35<br>Week 2: 14<br>Week 3: 11<br>Week 4: 23",
    "Week 1: 65<br>Week 2: 53<br>Week 3: 16<br>Week 4: 11",
    //...
];
Each month's data is a single string. Then, using the code from my other answer, show the data in the tooltip, using the index to select the month in dataWeeks (0 is January, 1 is February, 2 is March etc...):
text.on("mousemove", function(d, i) {
    tooltip.html(dataWeeks[i]);
    //...
Here is the demo:



'use strict';

var dataset = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

// let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd'];
let colors = ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a', 'white', 'white'];
var months = ['January - 2016', 'February - 2016', 'March - 2016', 'April - 2016', 'May - 2016', 'June - 2016', 'July - 2016', 'August - 2016', 'September - 2016', 'October - 2016', 'November - 2016', 'December - 2016'];
var dataWeeks = ["Week 1: 32<br>Week 2: 54<br>Week 3: 19<br>Week 4: 12","Week 1: 22<br>Week 2: 14<br>Week 3: 12<br>Week 4: 03","Week 1: 35<br>Week 2: 14<br>Week 3: 11<br>Week 4: 23","Week 1: 65<br>Week 2: 53<br>Week 3: 16<br>Week 4: 11","Week 1: 11<br>Week 2: 52<br>Week 3: 22<br>Week 4: 12","Week 1: 09<br>Week 2: 44<br>Week 3: 59<br>Week 4: 87","Week 1: 42<br>Week 2: 76<br>Week 3: 69<br>Week 4: 33","Week 1: 11<br>Week 2: 65<br>Week 3: 69<br>Week 4: 33","Week 1: 99<br>Week 2: 66<br>Week 3: 19<br>Week 4: 84","Week 1: 16<br>Week 2: 66<br>Week 3: 11<br>Week 4: 86","Week 1: 21<br>Week 2: 52<br>Week 3: 12<br>Week 4: 37","Week 1: 90<br>Week 2: 69<br>Week 3: 19<br>Week 4: 17"];

var width = document.querySelector('.chart-wrapper').offsetWidth,
  height = document.querySelector('.chart-wrapper').offsetHeight,
  minOfWH = Math.min(width, height) / 2,
  initialAnimDelay = 300,
  arcAnimDelay = 150,
  arcAnimDur = 3000,
  secDur = 1000,
  secIndividualdelay = 150;

var radius = undefined;

// calculate minimum of width and height to set chart radius
if (minOfWH > 200) {
  radius = 200;
} else {
  radius = minOfWH;
}

// append svg
var svg = d3.select('.chart-wrapper').append('svg').attr({
  'width': width,
  'height': height,
  'class': 'pieChart'
}).append('g');

svg.attr({
  'transform': 'translate(' + width / 2 + ', ' + height / 2 + ')'
});

// for drawing slices
var arc = d3.svg.arc().outerRadius(radius * 0.6).innerRadius(radius * 0.45);

// for labels and polylines
var outerArc = d3.svg.arc().innerRadius(radius * 0.85).outerRadius(radius * 0.85);

// d3 color generator
// let c10 = d3.scale.category10();

var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

var pie = d3.layout.pie().value(function(d) {
  return d;
});

var draw = function draw() {

  svg.append("g").attr("class", "lines");
  svg.append("g").attr("class", "slices");
  svg.append("g").attr("class", "labels");

  // define slice
  var slice = svg.select('.slices').datum(dataset).selectAll('path').data(pie);
  slice.enter().append('path').attr({
    'fill': function fill(d, i) {
      return colors[i];
    },
    'd': arc,
    'stroke-width': '25px'
  }).attr('transform', function(d, i) {
    return 'rotate(-180, 0, 0)';
  }).style('opacity', 0).transition().delay(function(d, i) {
    return i * arcAnimDelay + initialAnimDelay;
  }).duration(arcAnimDur).ease('elastic').style('opacity', 1).attr('transform', 'rotate(0,0,0)');

  slice.transition().delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).duration(secDur).attr('stroke-width', '5px');

  var midAngle = function midAngle(d) {
    return d.startAngle + (d.endAngle - d.startAngle) / 2;
  };

  var text = svg.select(".labels").selectAll("text").data(pie(dataset));

  text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).attr("cursor", "default").style('fill', function(d, i) {
    return colors[i];
  }).text(function(d, i) {
    return months[i];
  }).attr('transform', function(d) {
    // calculate outerArc centroid for 'this' slice
    var pos = outerArc.centroid(d);
    // define left and right alignment of text labels
    pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1);
    return 'translate(' + pos + ')';
  }).style('text-anchor', function(d) {
    return midAngle(d) < Math.PI ? "start" : "end";
  }).transition().delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).duration(secDur).style('opacity', 1);
  
   text.on("mousemove", function(d, i) {
                tooltip.html(dataWeeks[i])
                        .style('top', d3.event.pageY - 6 + 'px')
                        .style('left', d3.event.pageX + 14 + 'px')
                        .style("opacity", 1);
            }).on("mouseout", function(d) {
                tooltip.style("opacity", 0);
            });


  var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset));

  polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) {
    var pos = outerArc.centroid(d);
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
    return [arc.centroid(d), arc.centroid(d), arc.centroid(d)];
  }).transition().duration(secDur).delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).attr('points', function(d) {
    var pos = outerArc.centroid(d);
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
    return [arc.centroid(d), outerArc.centroid(d), pos];
  });
};

draw();

var button = document.querySelector('button');

var replay = function replay() {

  d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
  d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
  d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();

  setTimeout(draw, 800);
};


body {
  overflow: hidden;
  font-size: 16px;
}
.chart-wrapper {
  width: 100%;
  height: 100%;
  background-color: #0d0d0d;
  position: absolute;
}
path {
  stroke: #0d0d0d;
  /* stroke-width: 5px; */
  cursor: pointer;
  -webkit-transition: fill 250ms;
  transition: fill 250ms;
}
path:hover {
  /* stroke-width: 10px; */
  fill: #fff;
}
text {
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .5px;
}
polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 5px;
}
button {
  position: absolute;
  top: 20px;
  left: 820px;
  text-transform: uppercase;
  padding: 5px 10px;
  outline: none;
  font-size: .6em;
  background-color: black;
  color: #fff;
  border: 1px solid #fff;
  letter-spacing: 1px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
button:hover {
  background-color: #fff;
  color: #0d0d0d;
  box-shadow: 0 0 2px #fff;
}
button:active {
  opacity: 0.5;
}
div.tooltip {
  position: absolute;
  padding: 4px;
  background: white;
  border: 1px solid black;
  border-radius: 2px;
  font-size: 14px;
}


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Crazy Pie Chart</title>
  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

  <!-- Tooltip classes -->

  <link rel="stylesheet" href="http://vadikom.com/demos/poshytip/src/tip-skyblue/tip-skyblue.css" type="text/css" />


 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


  <link rel="stylesheet" href="css/style.css">


</head>

<body>

 


  <div class="chart-wrapper"></div>
  <button onclick='replay()'>Replay</button>
  <div class="textt" data-tip="this is the data ."></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>

上一篇 : ：在java中创建数字模式下一篇 : 我怎样才能启动android编程

jquery插件将数据绑定到工具提示（poshy tip）

相关文章

前端开发最新文章

热门教程

热门工具

相关阅读

技术问答最新文章