我想在工具提示上添加圆形边框。我看了一下网站上的示例，它们显示一个漂亮的圆形边框作为默认行为。我使用了相同的样式（默认为nv.d3.css），但是不幸的是我没有相同的结果。
你有什么主意吗？
<link rel="stylesheet" type="text/css" href="nv.d3.css"/>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="nv.d3.js" charset="utf-8"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
#chart3 svg {
height: 400px;
background-color: #DDDDDD;
border-radius: 10px;
}
.nvtooltip table {
margin: 0px;
border-spacing:0px;
border-collapse: separate;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-color: rgba(105, 105, 176, 0.52);
}
.nvtooltip thead {
font-size: 14px;
background-color: rgba(105, 105, 176, 0.2);
padding: 15px;
color: #212174;
}
.nvtooltip thead td {
padding-left: 8px;
border-bottom: 1px solid #4d4d4d;
}
.nvtooltip tbody td {
padding-right: 20px;
padding-left: 8px;
padding-top: 4px;
}
.nvtooltip tbody{
font-family: 'Roboto', sans-serif;
font-size: 12px;
}
.nvtooltip table td.legend-color-guide div {
width: 10px;
height: 10px;
vertical-align: middle;
}
.nvtooltip table td.legend-color-guide div {
border-radius: 50%
}
.nvd3 .nv-axis .nv-axisMaxMin text {
font-weight: normal;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.nvtooltip table tr.highlight td {
padding-right: 20px;
padding-left: 8px;
padding-top: 4px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-top-style: solid;
border-top-width: 2px;
background-color: rgba(93, 93, 175, 0.1);
}
</style>
<div id="chart3">
<svg> </svg>
</div>
<script>
d3.json("chart.json", function(error, data)
{
nv.addGraph(function()
{
var chart = nv.models.lineChart()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.useInteractiveGuideline(true)
//.forceY([0]);
chart.xAxis.tickFormat(function(d)
{
return d3.time.format('%d/%m')(new Date(d))
});
chart.yAxis.tickFormat(function(d)
{
return 'kWh ' + d3.format(',f')(d)
});
chart.yAxis.tickValues([0],[1]);
d3.select('#chart3 svg')
.datum(data)
.transition().duration(2500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
</script>
最佳答案
解决了：
我需要添加以下类：
<body class='with-3d-shadow with-transitions'>