Question

我想在d3 svg图表的路径/区域附加一个超链接，这样当点击时，'svg'路径“会在同一页面上指向目的地不同的”svg“。http://plnkr.co/edit/y2f9yUapCmYDI5sM6spK?p=info

以下是一些有问题的代码：

    state.append("text")
        .attr("x", (10))             
        .attr("y", padding.top/2)
        .attr("class", "multiples-title")  // original line
//        .attr("class", "multiples-title-" + selectedState)            // variation 2
//        .attr("xlink:id", "#" + selectedState + "headline")   
     .attr({ "xlink:href": "#" + selectedState})
//     .on("mouseover", function (d, i) {
            //alert('aaa');
//            d3.select(this)

   //             .attr({ "xlink:href": "http://en.wikipedia.org/wiki/"+selectedState + "2"})

//        })     
        .text(selectedState.replace(/_/g, ' '));//.toLowerCase());

Answer 1

以下是实施：

Plunker

paths.on('click', function (d) {
          var state = d.state.replace(/\s+/g, '_'),
            offset = $('svg.state.'+state).offset();
          $('html, body').animate({
            scrollTop: offset.top, scrollLeft: offset.left
          });
        });

当然，还包括jQuery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

如果这有帮助，请告诉我。：）

如何从一个svg中的路径元素链接到另一个svg的不同元素

1 个答案: