Как бы я применить href к ВСЮ SVG? - PullRequest
Новая
       13

Как бы я применить href к ВСЮ SVG?

0 голосов
/ 05 сентября 2018

У меня есть страница, где я строю кучу круговых диаграмм. На каждом я хочу добавить ссылку в другое место на странице.

В настоящее время мой код работает , но он применяет href только к отдельным частям круговой диаграммы, а также к тексту. Так, например, если вы щелкнете по кольцу круговой диаграммы, он будет работать так, как должен, но если вы нажмете на пробел между кольцами, это не так.

Сам SVG намного больше и его легче нажимать, но хотя я добавляю тег привязки к svg, он применяется только к элементам в SVG. Как мне исправить это поведение? 

function pieChartBuilder(teamName, values) {
    var dataset = values;

    var trimTitle = teamName.replace(' ', '');
    trimTitle = trimTitle.toLowerCase();

    var width = 175,
        height = 175,
        cwidth = 8;

    var color = d3.scale.category20();

    var pie = d3.layout.pie()
        .sort(null);

    var arc = d3.svg.arc();

    var svg = d3.select("#pieChart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("a") // here is where I append the anchor tag to the SVG, but it only applies to the individual elements within.
        .attr("href", ("#" + trimTitle))
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

    var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
    var path = gs.selectAll("path")
        .data(function (d) { return pie(d); })
        .enter().append("path")
        .attr("fill", function (d, i) { return color(i); })
        .attr("d", function (d, i, j) { return arc.innerRadius(5 + cwidth * j).outerRadius(3 + cwidth * (j + 1))(d); });

    svg.append("text")
        .attr("class", "title")
        .attr("x", 0)
        .attr("y", (0 - (height / 2.5)))
        .attr("text-anchor", "middle")
        .style("fill", "#808080")
        .text(teamName);

}

1 Ответ

0 голосов
/ 05 сентября 2018

Я думаю, что вы просто неправильно выбрали селекторы. Вы хотите, чтобы svg находился внутри тега a, верно?: 

d3.select("#pieChart")
  .append("a")
  .append("svg");

Вы (1) выбираете pieChart, затем (2) добавляете к нему тег a, затем вы (3) добавляете svg к этому.

...