гиперссылок в этом примере NVD3

Question

http://nvd3.org/ghpages/scatter.html

Я хочу, чтобы каждый мало данных (круг) активная ссылка. Мое реальное намерение состоит в том, чтобы каждый datapoint имел всплывающее окно модального окна, но пока я начну с ссылки, чтобы сделать ее проще, поскольку я новичок.

Я нашел эту ссылку Hyperlinks in d3.js objects

и попытался изменить код.

вот мой набор данных, так как вы можете видеть, что я добавил ключ/элемент (не уверен, что это такое) «url» и указал ссылку.

var data = [{key: 'Group1', values: [{x: 1, y: 1, url:"https:google.com"}, {x: -2, y: 3}, {x: 4, y: -9}]}, 
      {key: 'Group2', values: [{x: 2, y: 0}, {x: -4, y: -4}, {x: 1, y: 8}]}]; 

    return data; 

Затем после первой ссылки, я вставил это в HTML кода

nodeEnter.append("svg:a") 
    .attr("xlink:href", function(d){return d.url;}) // <-- reading the new "url" property 
.append("svg:rect") 
    .attr("y", -barHeight/2) 
    .attr("height", barHeight) 
    .attr("width", barWidth) 
    .style("fill", color) 
    .on("click", click); // <- remove this if you like 

Но это не работает, я предполагаю, что это nvd3 не совместима с чистым кодом d3. Может ли кто-нибудь помочь мне, возможно, с примером кода, который мне нужно будет сделать?

Answer 1

Если вы читаете диаграммы рассеяния nvd3 source code, вы увидите, что есть несколько параметров, которые вы можете установить, но не этот.

Nvd3 - это библиотека, предоставляющая повторно используемые диаграммы, что означает, что они обеспечивают целую кучу функциональных возможностей, но у вас есть некоторые ограничения из-за того, что является публичным или нет, даже если они стараются иметь как можно больше функций. То, что вы пытаетесь сделать в своем коде, не будет работать, потому что у вас нет прямого контроля над этим при вызове диаграммы рассеяния nvd3.

Однако есть хорошая новость: Nvd3 является открытым исходным кодом, поэтому вы можете изменить источник scatter.js, чтобы делать то, что вы хотите.

Answer 2

Вы можете посмотреть на исходном коде и комментарии указатель-событие линии

div.tooltip { 
    position: absolute; 
    text-align: center; 
    width: 60px; 
    height: 28px;  
    padding: 2px; 
    font: 12px sans-serif;  
    background: lightsteelblue; 
    border: 0px;     
    border-radius: 8px; 
/* pointer-events: none; This line needs to be removed */ 

} 

Для получения дополнительной информации см this ссылки.