我有一张基于this one here的图表 - 它是一个带缩放控件的折线图。
我需要在每个路径点添加工具提示，因此我按了this approach。
我还需要突出显示某些日期范围，我通过将rect个对象附加到图表中来实现。
这是我的图表codepen 。可以看出，图表正常运行，直到使用缩放功能，此时我的附加对象不会根据当前缩放级别重新绘制。
如何实现此功能？
答案 0 :(得分：1)
您的缩放处理程序正在根据缩放量重新绘制元素。您尚未将圈子或“突出显示”区域添加到此功能中：
function zoomed() {
var xz = d3.event.transform.rescaleX(x);
xGroup.call(xAxis.scale(xz));
areaPath.attr("d", area.x(function(d) { return xz(d.date); }));
toolTips.attr("cx", function(d) { return xz(d.date); });
var left = xz(new Date("Jun 1 1988")),
right = xz(new Date("Jun 31 1988")),
wid = right - left;
highlight
.attr("x", left)
.attr("width", wid);
}
运行代码：
var data = [
{ date:"1988-01-01",value:12681 },
{ date:"1988-01-02",value:13264 },
{ date:"1988-01-03",value:13953 },
{ date:"1988-01-04",value:13921 },
{ date:"1988-01-05",value:13932 },
{ date:"1988-01-06",value:13157 },
{ date:"1988-01-07",value:11159 },
{ date:"1988-01-08",value:11631 },
{ date:"1988-01-09",value:12045 },
{ date:"1988-01-10",value:13160 },
{ date:"1988-01-11",value:14240 },
{ date:"1988-01-12",value:14302 },
{ date:"1988-01-13",value:14353 },
{ date:"1988-01-14",value:14451 },
{ date:"1988-01-15",value:14496 },
{ date:"1988-01-16",value:13041 },
{ date:"1988-01-17",value:13337 },
{ date:"1988-01-18",value:12396 },
{ date:"1988-01-19",value:13721 },
{ date:"1988-01-20",value:13745 },
{ date:"1988-01-21",value:14170 },
{ date:"1988-01-22",value:14570 },
{ date:"1988-01-23",value:13059 },
{ date:"1988-01-24",value:13858 },
{ date:"1988-01-25",value:13947 },
{ date:"1988-01-26",value:14188 },
{ date:"1988-01-27",value:14493 },
{ date:"1988-01-28",value:14445 },
{ date:"1988-01-29",value:14589 },
{ date:"1988-01-30",value:13125 },
{ date:"1988-01-31",value:13766 },
{ date:"1988-02-01",value:14083 },
{ date:"1988-02-02",value:14175 },
{ date:"1988-02-03",value:13931 },
{ date:"1988-02-04",value:13677 },
{ date:"1988-02-05",value:14039 },
{ date:"1988-02-06",value:12703 },
{ date:"1988-02-07",value:13584 },
{ date:"1988-02-08",value:14281 },
{ date:"1988-02-09",value:14432 },
{ date:"1988-02-10",value:13875 },
{ date:"1988-02-11",value:13188 },
{ date:"1988-02-12",value:13403 },
{ date:"1988-02-13",value:12862 },
{ date:"1988-02-14",value:13446 },
{ date:"1988-02-15",value:14315 },
{ date:"1988-02-16",value:14471 },
{ date:"1988-02-17",value:14646 },
{ date:"1988-02-18",value:14412 },
{ date:"1988-02-19",value:14319 },
{ date:"1988-02-20",value:12963 },
{ date:"1988-02-21",value:13789 },
{ date:"1988-02-22",value:14512 },
{ date:"1988-02-23",value:14521 },
{ date:"1988-02-24",value:14634 },
{ date:"1988-02-25",value:14692 },
{ date:"1988-02-26",value:14705 },
{ date:"1988-02-27",value:13105 },
{ date:"1988-02-28",value:13824 },
{ date:"1988-02-29",value:14669 },
{ date:"1988-03-01",value:14520 },
{ date:"1988-03-02",value:14451 },
{ date:"1988-03-03",value:14357 },
{ date:"1988-03-04",value:14361 },
{ date:"1988-03-05",value:13054 },
{ date:"1988-03-06",value:13889 },
{ date:"1988-03-07",value:14587 },
{ date:"1988-03-08",value:14638 },
{ date:"1988-03-09",value:14489 },
{ date:"1988-03-10",value:14425 },
{ date:"1988-03-11",value:14460 },
{ date:"1988-03-12",value:13075 },
{ date:"1988-03-13",value:13670 },
{ date:"1988-03-14",value:14634 },
{ date:"1988-03-15",value:14582 },
{ date:"1988-03-16",value:14571 },
{ date:"1988-03-17",value:14493 },
{ date:"1988-03-18",value:14529 },
{ date:"1988-03-19",value:13229 },
{ date:"1988-03-20",value:13813 },
{ date:"1988-03-21",value:14628 },
{ date:"1988-03-22",value:14680 },
{ date:"1988-03-23",value:14561 },
{ date:"1988-03-24",value:14307 },
{ date:"1988-03-25",value:14435 },
{ date:"1988-03-26",value:13150 },
{ date:"1988-03-27",value:13874 },
{ date:"1988-03-28",value:14657 },
{ date:"1988-03-29",value:14571 },
{ date:"1988-03-30",value:14734 },
{ date:"1988-03-31",value:14533 },
{ date:"1988-04-01",value:14570 },
{ date:"1988-04-02",value:12883 },
{ date:"1988-04-03",value:13893 },
{ date:"1988-04-04",value:14680 },
{ date:"1988-04-05",value:14779 },
{ date:"1988-04-06",value:14430 },
{ date:"1988-04-07",value:14650 },
{ date:"1988-04-08",value:14626 },
{ date:"1988-04-09",value:13326 },
{ date:"1988-04-10",value:13935 },
{ date:"1988-04-11",value:14609 },
{ date:"1988-04-12",value:14760 },
{ date:"1988-04-13",value:14596 },
{ date:"1988-04-14",value:14495 },
{ date:"1988-04-15",value:14528 },
{ date:"1988-04-16",value:13098 },
{ date:"1988-04-17",value:13629 },
{ date:"1988-04-18",value:14317 },
{ date:"1988-04-19",value:14278 },
{ date:"1988-04-20",value:14343 },
{ date:"1988-04-21",value:14315 },
{ date:"1988-04-22",value:14328 },
{ date:"1988-04-23",value:12743 },
{ date:"1988-04-24",value:13694 },
{ date:"1988-04-25",value:14461 },
{ date:"1988-04-26",value:14408 },
{ date:"1988-04-27",value:14443 },
{ date:"1988-04-28",value:14519 },
{ date:"1988-04-29",value:14510 },
{ date:"1988-04-30",value:13065 },
{ date:"1988-05-01",value:13620 },
{ date:"1988-05-02",value:14265 },
{ date:"1988-05-03",value:14400 },
{ date:"1988-05-04",value:14452 },
{ date:"1988-05-05",value:14352 },
{ date:"1988-05-06",value:14425 },
{ date:"1988-05-07",value:13111 },
{ date:"1988-05-08",value:13550 },
{ date:"1988-05-09",value:14227 },
{ date:"1988-05-10",value:14451 },
{ date:"1988-05-11",value:14463 },
{ date:"1988-05-12",value:14498 },
{ date:"1988-05-13",value:14550 },
{ date:"1988-05-14",value:13103 },
{ date:"1988-05-15",value:13703 },
{ date:"1988-05-16",value:14257 },
{ date:"1988-05-17",value:14322 },
{ date:"1988-05-18",value:14367 },
{ date:"1988-05-19",value:14316 },
{ date:"1988-05-20",value:14345 },
{ date:"1988-05-21",value:13115 },
{ date:"1988-05-22",value:13694 },
{ date:"1988-05-23",value:14312 },
{ date:"1988-05-24",value:14237 },
{ date:"1988-05-25",value:14430 },
{ date:"1988-05-26",value:14543 },
{ date:"1988-05-27",value:14607 },
{ date:"1988-05-28",value:12474 },
{ date:"1988-05-29",value:12229 },
{ date:"1988-05-30",value:13811 },
{ date:"1988-05-31",value:13060 },
{ date:"1988-06-01",value:14430 },
{ date:"1988-06-02",value:14441 },
{ date:"1988-06-03",value:14610 },
{ date:"1988-06-04",value:13296 },
{ date:"1988-06-05",value:13885 },
{ date:"1988-06-06",value:14572 },
{ date:"1988-06-07",value:14678 },
{ date:"1988-06-08",value:14520 },
{ date:"1988-06-09",value:14463 },
{ date:"1988-06-10",value:14559 },
{ date:"1988-06-11",value:13414 },
{ date:"1988-06-12",value:13969 },
{ date:"1988-06-13",value:14687 },
{ date:"1988-06-14",value:14624 },
{ date:"1988-06-15",value:14586 },
{ date:"1988-06-16",value:14534 },
{ date:"1988-06-17",value:14561 },
{ date:"1988-06-18",value:13391 },
{ date:"1988-06-19",value:13971 },
{ date:"1988-06-20",value:14616 },
{ date:"1988-06-21",value:14650 },
{ date:"1988-06-22",value:14529 },
{ date:"1988-06-23",value:14592 },
{ date:"1988-06-24",value:14738 },
{ date:"1988-06-25",value:13462 },
{ date:"1988-06-26",value:13932 },
{ date:"1988-06-27",value:14716 },
{ date:"1988-06-28",value:14579 },
{ date:"1988-06-29",value:14567 },
{ date:"1988-06-30",value:14524 },
{ date:"1988-07-01",value:14579 },
{ date:"1988-07-02",value:12791 },
{ date:"1988-07-03",value:12110 },
{ date:"1988-07-04",value:13479 },
{ date:"1988-07-05",value:14584 },
{ date:"1988-07-06",value:14627 },
{ date:"1988-07-07",value:14620 },
{ date:"1988-07-08",value:14585 },
{ date:"1988-07-09",value:13460 },
{ date:"1988-07-10",value:13897 },
{ date:"1988-07-11",value:14646 },
{ date:"1988-07-12",value:14559 },
{ date:"1988-07-13",value:14710 },
{ date:"1988-07-14",value:14572 },
{ date:"1988-07-15",value:14639 },
{ date:"1988-07-16",value:13355 },
{ date:"1988-07-17",value:13775 },
{ date:"1988-07-18",value:14491 },
{ date:"1988-07-19",value:14640 },
{ date:"1988-07-20",value:14431 },
{ date:"1988-07-21",value:14444 },
{ date:"1988-07-22",value:14487 },
{ date:"1988-07-23",value:13432 },
{ date:"1988-07-24",value:13977 },
{ date:"1988-07-25",value:14604 },
{ date:"1988-07-26",value:14092 },
{ date:"1988-07-27",value:14424 },
{ date:"1988-07-28",value:14519 },
{ date:"1988-07-29",value:14545 },
{ date:"1988-07-30",value:13355 },
{ date:"1988-07-31",value:13939 },
{ date:"1988-08-01",value:14535 },
{ date:"1988-08-02",value:14459 },
{ date:"1988-08-03",value:14532 },
{ date:"1988-08-04",value:14448 },
{ date:"1988-08-05",value:14325 },
{ date:"1988-08-06",value:13338 },
{ date:"1988-08-07",value:13981 },
{ date:"1988-08-08",value:14466 },
{ date:"1988-08-09",value:14520 },
{ date:"1988-08-10",value:14475 },
{ date:"1988-08-11",value:14494 },
{ date:"1988-08-12",value:14571 },
{ date:"1988-08-13",value:13385 },
{ date:"1988-08-14",value:13985 },
{ date:"1988-08-15",value:14616 },
{ date:"1988-08-16",value:14715 },
{ date:"1988-08-17",value:14509 },
{ date:"1988-08-18",value:14282 },
{ date:"1988-08-19",value:14498 },
{ date:"1988-08-20",value:13379 },
{ date:"1988-08-21",value:14052 },
{ date:"1988-08-22",value:14746 },
{ date:"1988-08-23",value:14626 },
{ date:"1988-08-24",value:14670 },
{ date:"1988-08-25",value:14672 },
{ date:"1988-08-26",value:14650 },
{ date:"1988-08-27",value:13507 },
{ date:"1988-08-28",value:14020 },
{ date:"1988-08-29",value:14593 },
{ date:"1988-08-30",value:14652 },
{ date:"1988-08-31",value:14590 },
{ date:"1988-09-01",value:14556 },
{ date:"1988-09-02",value:14530 },
{ date:"1988-09-03",value:12314 },
{ date:"1988-09-04",value:11712 },
{ date:"1988-09-05",value:13559 },
{ date:"1988-09-06",value:14466 },
{ date:"1988-09-07",value:14622 },
{ date:"1988-09-08",value:14638 },
{ date:"1988-09-09",value:14588 },
{ date:"1988-09-10",value:13172 },
{ date:"1988-09-11",value:13755 },
{ date:"1988-09-12",value:14333 },
{ date:"1988-09-13",value:14565 },
{ date:"1988-09-14",value:14475 },
{ date:"1988-09-15",value:14509 },
{ date:"1988-09-16",value:14209 },
{ date:"1988-09-17",value:12952 },
{ date:"1988-09-18",value:13577 },
{ date:"1988-09-19",value:14253 },
{ date:"1988-09-20",value:14510 },
{ date:"1988-09-21",value:14619 },
{ date:"1988-09-22",value:14479 },
{ date:"1988-09-23",value:14512 },
{ date:"1988-09-24",value:13087 },
{ date:"1988-09-25",value:13805 },
{ date:"1988-09-26",value:14630 },
{ date:"1988-09-27",value:14531 },
{ date:"1988-09-28",value:14567 },
{ date:"1988-09-29",value:14298 },
{ date:"1988-09-30",value:14214 },
{ date:"1988-10-01",value:13097 },
{ date:"1988-10-02",value:13757 },
{ date:"1988-10-03",value:14573 },
{ date:"1988-10-04",value:14543 },
{ date:"1988-10-05",value:14509 },
{ date:"1988-10-06",value:14646 },
{ date:"1988-10-07",value:14617 },
{ date:"1988-10-08",value:13148 },
{ date:"1988-10-09",value:13743 },
{ date:"1988-10-10",value:14533 },
{ date:"1988-10-11",value:14507 },
{ date:"1988-10-12",value:14610 },
{ date:"1988-10-13",value:14570 },
{ date:"1988-10-14",value:14562 },
{ date:"1988-10-15",value:13183 },
{ date:"1988-10-16",value:13818 },
{ date:"1988-10-17",value:14054 },
{ date:"1988-10-18",value:14415 },
{ date:"1988-10-19",value:14603 },
{ date:"1988-10-20",value:14421 },
{ date:"1988-10-21",value:14407 },
{ date:"1988-10-22",value:13135 },
{ date:"1988-10-23",value:13780 },
{ date:"1988-10-24",value:14511 },
{ date:"1988-10-25",value:14573 },
{ date:"1988-10-26",value:14522 },
{ date:"1988-10-27",value:14482 },
{ date:"1988-10-28",value:14393 },
{ date:"1988-10-29",value:13186 },
{ date:"1988-10-30",value:13806 },
{ date:"1988-10-31",value:14660 },
{ date:"1988-11-01",value:14438 },
{ date:"1988-11-02",value:14512 },
{ date:"1988-11-03",value:14552 },
{ date:"1988-11-04",value:13877 },
{ date:"1988-11-05",value:12702 },
{ date:"1988-11-06",value:13683 },
{ date:"1988-11-07",value:14626 },
{ date:"1988-11-08",value:14595 },
{ date:"1988-11-09",value:14439 },
{ date:"1988-11-10",value:14389 },
{ date:"1988-11-11",value:14501 },
{ date:"1988-11-12",value:13052 },
{ date:"1988-11-13",value:13674 },
{ date:"1988-11-14",value:14634 },
{ date:"1988-11-15",value:14208 },
{ date:"1988-11-16",value:14281 },
{ date:"1988-11-17",value:14465 },
{ date:"1988-11-18",value:14450 },
{ date:"1988-11-19",value:12846 },
{ date:"1988-11-20",value:13365 },
{ date:"1988-11-21",value:14459 },
{ date:"1988-11-22",value:14507 },
{ date:"1988-11-23",value:14644 },
{ date:"1988-11-24",value:11448 },
{ date:"1988-11-25",value:11132 },
{ date:"1988-11-26",value:12401 },
{ date:"1988-11-27",value:13797 },
{ date:"1988-11-28",value:14541 },
{ date:"1988-11-29",value:14615 },
{ date:"1988-11-30",value:14511 },
{ date:"1988-12-01",value:14444 },
{ date:"1988-12-02",value:14608 },
{ date:"1988-12-03",value:13131 },
{ date:"1988-12-04",value:13859 },
{ date:"1988-12-05",value:14697 },
{ date:"1988-12-06",value:14666 },
{ date:"1988-12-07",value:14570 },
{ date:"1988-12-08",value:14482 },
{ date:"1988-12-09",value:14459 },
{ date:"1988-12-10",value:13160 },
{ date:"1988-12-11",value:13652 },
{ date:"1988-12-12",value:14407 },
{ date:"1988-12-13",value:14333 },
{ date:"1988-12-14",value:14415 },
{ date:"1988-12-15",value:14300 },
{ date:"1988-12-16",value:14386 },
{ date:"1988-12-17",value:12951 },
{ date:"1988-12-18",value:13705 },
{ date:"1988-12-19",value:14462 },
{ date:"1988-12-20",value:14336 },
{ date:"1988-12-21",value:14455 },
{ date:"1988-12-22",value:14393 },
{ date:"1988-12-23",value:14459 },
{ date:"1988-12-24",value:12496 },
{ date:"1988-12-25",value:12661 },
{ date:"1988-12-26",value:13425 },
{ date:"1988-12-27",value:13706 },
{ date:"1988-12-28",value:13865 },
{ date:"1988-12-29",value:14213 },
{ date:"1988-12-30",value:14303 },
{ date:"1988-12-31",value:12826 },
{ date:"1989-01-01",value:13040 },
{ date:"1989-01-02",value:14007 },
{ date:"1989-01-03",value:14112 },
{ date:"1989-01-04",value:14275 },
{ date:"1989-01-05",value:14356 },
{ date:"1989-01-06",value:13401 },
{ date:"1989-01-07",value:12519 },
{ date:"1989-01-08",value:13058 },
{ date:"1989-01-09",value:14285 },
{ date:"1989-01-10",value:14364 },
{ date:"1989-01-11",value:14125 },
{ date:"1989-01-12",value:14118 },
{ date:"1989-01-13",value:14365 },
{ date:"1989-01-14",value:12895 },
{ date:"1989-01-15",value:13489 },
{ date:"1989-01-16",value:14527 },
{ date:"1989-01-17",value:14555 },
{ date:"1989-01-18",value:14484 },
{ date:"1989-01-19",value:14394 },
{ date:"1989-01-20",value:14295 },
{ date:"1989-01-21",value:12932 },
{ date:"1989-01-22",value:13711 },
{ date:"1989-01-23",value:14656 },
{ date:"1989-01-24",value:14611 },
{ date:"1989-01-25",value:14117 },
{ date:"1989-01-26",value:14319 },
{ date:"1989-01-27",value:14530 },
{ date:"1989-01-28",value:12629 },
{ date:"1989-01-29",value:13611 },
{ date:"1989-01-30",value:14568 },
{ date:"1989-01-31",value:14634 },
{ date:"1989-02-01",value:14106 },
{ date:"1989-02-02",value:13882 },
{ date:"1989-02-03",value:13394 },
{ date:"1989-02-04",value:12045 },
{ date:"1989-02-05",value:12347 },
{ date:"1989-02-06",value:13515 },
{ date:"1989-02-07",value:14265 },
{ date:"1989-02-08",value:14327 },
{ date:"1989-02-09",value:14223 },
{ date:"1989-02-10",value:14422 },
{ date:"1989-02-11",value:12870 },
{ date:"1989-02-12",value:13673 },
{ date:"1989-02-13",value:14170 },
{ date:"1989-02-14",value:14445 },
{ date:"1989-02-15",value:14284 },
{ date:"1989-02-16",value:14449 },
{ date:"1989-02-17",value:14203 },
{ date:"1989-02-18",value:12474 },
{ date:"1989-02-19",value:13446 },
{ date:"1989-02-20",value:14058 },
{ date:"1989-02-21",value:14058 },
{ date:"1989-02-22",value:14419 },
{ date:"1989-02-23",value:14376 },
{ date:"1989-02-24",value:13955 },
{ date:"1989-02-25",value:13123 },
{ date:"1989-02-26",value:13687 },
{ date:"1989-02-27",value:14466 },
{ date:"1989-02-28",value:14388 },
{ date:"1989-03-01",value:14189 },
{ date:"1989-03-02",value:13895 },
{ date:"1989-03-03",value:13847 },
{ date:"1989-03-04",value:11110 },
{ date:"1989-03-05",value:11889 },
{ date:"1989-03-06",value:12252 },
{ date:"1989-03-07",value:13099 },
{ date:"1989-03-08",value:13193 },
{ date:"1989-03-09",value:13571 },
{ date:"1989-03-10",value:13705 },
{ date:"1989-03-11",value:12519 },
{ date:"1989-03-12",value:12995 },
{ date:"1989-03-13",value:13722 },
{ date:"1989-03-14",value:13511 },
{ date:"1989-03-15",value:13725 },
{ date:"1989-03-16",value:13767 },
{ date:"1989-03-17",value:13595 },
{ date:"1989-03-18",value:12160 },
{ date:"1989-03-19",value:13065 },
{ date:"1989-03-20",value:13566 },
{ date:"1989-03-21",value:13708 },
{ date:"1989-03-22",value:13781 },
{ date:"1989-03-23",value:13772 },
{ date:"1989-03-24",value:13798 },
{ date:"1989-03-25",value:12458 },
{ date:"1989-03-26",value:13122 },
{ date:"1989-03-27",value:13828 },
{ date:"1989-03-28",value:13626 },
{ date:"1989-03-29",value:13750 },
{ date:"1989-03-30",value:13609 },
{ date:"1989-03-31",value:13496 },
{ date:"1989-04-01",value:12357 },
{ date:"1989-04-02",value:12889 },
{ date:"1989-04-03",value:13558 },
{ date:"1989-04-04",value:13404 },
{ date:"1989-04-05",value:13681 },
{ date:"1989-04-06",value:13712 },
{ date:"1989-04-07",value:13816 },
{ date:"1989-04-08",value:12411 },
{ date:"1989-04-09",value:12906 },
{ date:"1989-04-10",value:13907 },
{ date:"1989-04-11",value:13923 },
{ date:"1989-04-12",value:13891 },
{ date:"1989-04-13",value:13864 },
{ date:"1989-04-14",value:13815 },
{ date:"1989-04-15",value:12511 },
{ date:"1989-04-16",value:13063 },
{ date:"1989-04-17",value:13852 },
{ date:"1989-04-18",value:13824 },
{ date:"1989-04-19",value:13845 },
{ date:"1989-04-20",value:13848 },
{ date:"1989-04-21",value:13931 },
{ date:"1989-04-22",value:12659 },
{ date:"1989-04-23",value:13077 },
{ date:"1989-04-24",value:13851 },
{ date:"1989-04-25",value:13846 },
{ date:"1989-04-26",value:13880 },
{ date:"1989-04-27",value:13889 },
{ date:"1989-04-28",value:13752 },
{ date:"1989-04-29",value:12515 },
{ date:"1989-04-30",value:13041 },
{ date:"1989-05-01",value:13640 },
{ date:"1989-05-02",value:13700 },
{ date:"1989-05-03",value:13599 },
{ date:"1989-05-04",value:13611 },
{ date:"1989-05-05",value:13684 },
{ date:"1989-05-06",value:12362 },
{ date:"1989-05-07",value:12955 },
{ date:"1989-05-08",value:13814 },
{ date:"1989-05-09",value:13728 },
{ date:"1989-05-10",value:13524 },
{ date:"1989-05-11",value:13689 },
{ date:"1989-05-12",value:13691 },
{ date:"1989-05-13",value:12450 },
{ date:"1989-05-14",value:13076 },
{ date:"1989-05-15",value:13651 },
{ date:"1989-05-16",value:13403 },
{ date:"1989-05-17",value:13597 },
{ date:"1989-05-18",value:13529 },
{ date:"1989-05-19",value:13577 },
{ date:"1989-05-20",value:12427 },
{ date:"1989-05-21",value:12948 },
{ date:"1989-05-22",value:13762 },
{ date:"1989-05-23",value:13748 },
{ date:"1989-05-24",value:13622 },
{ date:"1989-05-25",value:13640 },
{ date:"1989-05-26",value:13579 },
{ date:"1989-05-27",value:11901 },
{ date:"1989-05-28",value:11992 },
{ date:"1989-05-29",value:13354 },
{ date:"1989-05-30",value:13792 },
{ date:"1989-05-31",value:13592 },
{ date:"1989-06-01",value:13321 },
{ date:"1989-06-02",value:13761 },
{ date:"1989-06-03",value:12546 },
{ date:"1989-06-04",value:13102 },
{ date:"1989-06-05",value:13842 },
{ date:"1989-06-06",value:13748 },
{ date:"1989-06-07",value:13566 },
{ date:"1989-06-08",value:13631 },
{ date:"1989-06-09",value:13682 },
{ date:"1989-06-10",value:12778 },
{ date:"1989-06-11",value:13171 },
{ date:"1989-06-12",value:13588 },
{ date:"1989-06-13",value:13451 },
{ date:"1989-06-14",value:13553 },
{ date:"1989-06-15",value:13585 },
{ date:"1989-06-16",value:13697 }
];
var margin = {top: 20, right: 20, bottom: 30, left: 60},
width = $('.chart').width() - margin.left - margin.right,
height = $('.chart').height() - margin.top - margin.bottom;
var svg = d3.select(".chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var zoom = d3.zoom()
.scaleExtent([1 / 4, 8])
.translateExtent([[-width, -Infinity], [2 * width, Infinity]])
.on("zoom", zoomed);
var zoomRect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "none")
.attr("pointer-events", "all")
.call(zoom);
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseDate = d3.timeParse("%Y-%m-%d"),
formatDate = d3.timeFormat("%Y"),
formatDate2 = d3.timeFormat("%d/%m/%Y");
var x = d3.scaleTime()
.domain([new Date(1988, 0, 1), new Date(1989, 11, 31)])
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
var area = d3.line()
.curve(d3.curveCardinal)
.y(function(d) { return y(d.value); });
var areaPath = g.append("path")
.attr('class', 'line')
.attr("clip-path", "url(#clip)");
var yGroup = g.append("g");
var xGroup = g.append("g")
.attr("transform", "translate(0," + height + ")");
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "Date: " + formatDate2(d.date) + " Value: " + d.value;
});
g.call(tip);
var left = x(new Date("Jun 1 1988"));
var right = x(new Date("Jun 31 1988"));
var wid = right - left;
var highlight = g.append("rect")
.attr("x", left)
.attr("width", wid)
.attr('class', 'promo' )
.attr("height", height);
var toolTips = g.selectAll("circle")
.data(data).enter()
.append("circle")
.attr("r", 2)
.style("fill","#f00")
.style("stroke","none")
.style("pointer-events","all")
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
g.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
var xExtent = d3.extent(data, function(d) { return d.date; });
zoom.translateExtent([[x(xExtent[0]), -Infinity], [x(xExtent[1]), Infinity]]);
y.domain([0, d3.max(data, function(d) { return d.value; })]);
yGroup.call(yAxis).select(".domain").remove();
areaPath.datum(data);
zoomRect.call(zoom.transform, d3.zoomIdentity);
toolTips.attr("cx", function(d) { return x(d.date); }).attr("cy", function(d) { return y(d.value); });
function zoomed() {
var xz = d3.event.transform.rescaleX(x);
xGroup.call(xAxis.scale(xz));
areaPath.attr("d", area.x(function(d) { return xz(d.date); }));
toolTips.attr("cx", function(d) { return xz(d.date); });
var left = xz(new Date("Jun 1 1988")),
right = xz(new Date("Jun 31 1988")),
wid = right - left;
highlight
.attr("x", left)
.attr("width", wid);
}.promo {
fill: rgba(255,0,0,0.5);
}
.price {
fill: $brand-primary;
}
.chart {
height: 100vh;
width: 100%;
overflow: hidden;
}
svg {
font: 10px sans-serif;
}
.axis {
shape-rendering: crispEdges;
}
.axis path, .axis line {
fill: none;
stroke-width: .5px;
}
.x.axis path {
stroke: #000;
}
.x.axis line {
stroke: #fff;
stroke-opacity: .5;
}
.y.axis line {
stroke: #ddd;
}
path.line {
fill: none;
stroke: #000;
stroke-width: .5px;
}
rect.pane {
cursor: move;
fill: none;
pointer-events: all;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://cdn.rawgit.com/VACLab/d3-tip/master/d3-tip.js"></script>
<div class="chart"></div>