【问题标题】:points are not visible clearly in nvd3 ghaph在 nvd3 ghaph 中点不清晰可见
【发布时间】:2013-08-12 09:01:19
【问题描述】:

我正在使用 nvd3.js 显示具有 3 个不同键的图形。在这 3 个中,1 有很多坐标,其余的 2 s 只有一个坐标。现在这些单一的坐标是不可见的。我的代码是这样的:

nv.addGraph(function () {
    var chart = nv.models.lineChart().margin({
        top: 30,
        right: 20,
        bottom: 50,
        left: 45
    }).showLegend(true).tooltipContent(function (key, y, e, graph) {
        return '<h3>' + key + '</h3>' + '<p>' + e + '% at ' + y + '</p>'
    });

    chart.xAxis.tickFormat(function (d) {
        return d3.time.format('%x')(new Date(d))
    });

    d3.select('#lineChart svg')
        .datum(data)
        .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});

data = [{
    "values": [{
        "x": 1025409600000 ,
            "y": 2
    }, {
        "x": 1028088000000 ,
            "y": 4
    }, {
        "x": 1030766400000 ,
            "y": 1
    }, {
        "x": 1033358400000 ,
            "y": 3
    }, {
        "x": 1036040400000  ,
            "y": 0
    }, {
        "x": 1038632400000  ,
            "y": 3
    }],
        "key": "Cool"
},{
"values": [{
        "x": 1025409600000 ,
        "y": 2
           }],
 "key":hot
    }
]

认为如果我将鼠标悬停在光标上,hot 点会显示,但该位置不可见。 如果键只有一个坐标,请指导我如何使其可见。 提前致谢。

更新了图片

【问题讨论】:

  • 能否请您输出图片
  • 请查看更新后的图片。

标签: jquery graph nvd3.js


【解决方案1】:

你需要从 0 开始增加不透明度。

.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
  fill-opacity: .7;
}

你可以使用chart.size(300)来增加圆圈的大小

这是一个工作示例:http://plnkr.co/edit/fFqSny?p=preview

【讨论】:

  • 抱歉,它正在增加大小。但最初我只有一个坐标,然后除非我将鼠标悬停在该特定点上,否则它不会显示。但我想在鼠标悬停之前显示这些点。
  • 这个 plunk 从一开始就使用一个数据点的默认大小。 plnkr.co/edit/4OnDy0?p=preview你能发布你的css吗?
【解决方案2】:

您也可以使用“fillOpacity”。

例如chart.bars1.fillOpacity(0.7)

见:

Hand over fillOpacity for bars in multiBar and multiBarHorizontal charts #1614https://github.com/novus/nvd3/issues/707

【讨论】:

  • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接答案可能会失效。 - From Review
  • 任何建设性的批评我可以如何改进这个答案?似乎没有任何“答案的基本部分”可供我在这里包括,所以我只是举了一个例子。
猜你喜欢
  • 1970-01-01
  • 2014-06-28
  • 1970-01-01
  • 2021-02-28
  • 2021-08-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多