Question

我想在工具提示上设置圆形边框。我查看了网站上的示例，它们显示了一个漂亮的圆形边框作为默认行为。我使用了相同的样式（默认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>

Answer 1

<强>解决：

我需要添加以下类：

<body class='with-3d-shadow with-transitions'>

工具提示上的NVD3圆形边框

1 个答案: