Question

我正在使用以下代码创建D3条形图。

<head>
 <style>

 .axis {
   font: 10px sans-serif;
 }

   .axis path,
 .axis line {
   fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

 </style>
</head>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")");

 var data = [{"text":"A","value":50,"linkurl":"http://google.com"},   {"text":"B","value":100,"linkurl":"http://php.net"},{"text":"C","value":150,"linkurl":"http://drupal.org"}]

data.forEach(function(d) {

    d.text = d.text;
    d.value = +d.value;
    d.linkurl = d.linkurl;
});

 x.domain(data.map(function(d) { return d.text; }));
 y.domain([0, d3.max(data, function(d) { return d.value; })]);

   svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-45)" );

  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("");

  svg.selectAll("bar")
  .data(data)
 .enter().append("rect")
  .style("fill", "steelblue")
  .attr("x", function(d) { return x(d.text); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); });

   svg.on("click", function (d) { //<-D

    //var position = d3.mouse(svg.node());
    window.location.href='http://google.com';
  //window.location.href=d.linkurl;
  });     


  </script>

  </body>

并希望在每个栏上创建链接..因为我正在使用代码。当我为每个栏使用相同的URL但它没有正常工作为每个酒吧的不同URl ...

var data = [{"text":"A","value":50,"linkurl":"http://google.com"},{"text":"B","value":100,"linkurl":"http://php.net"},{"text":"C","value":150,"linkurl":"http://drupal.org"}]

data.forEach(function(d) {

    d.text = d.text;
    d.value = +d.value;
    d.linkurl = d.linkurl;
});

 svg.on("click", function (d) { //<-D        
    //var position = d3.mouse(svg.node());
    window.location.href='http://google.com';
  //window.location.href=d.linkurl;
 });

Answer 1

您必须将点击侦听器绑定到栏（rectangles）而不是svg。

var bars = svg.selectAll("bar")
    .data(data)
    .enter()
    .append("rect")
    .style("fill", "steelblue")
    .attr("x", function(d) {
        return x(d.text);
    }).attr("width", x.rangeBand())
    .attr("y", function(d) {
        return y(d.value);
    }).attr("height", function(d) {
        return height - y(d.value);
    });

bars.on("click", function(d) {
    window.location.href = d.linkurl;
});

＆＃13;

var margin = {
    top: 20,
    right: 20,
    bottom: 70,
    left: 40
}, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangeRoundBands([ 0, width ], .05);

var y = d3.scale.linear().range([ height, 0 ]);

var xAxis = d3.svg.axis().scale(x).orient("bottom");

var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);

var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [ {
    text: "A",
    value: 50,
    linkurl: "http://google.com"
}, {
    text: "B",
    value: 100,
    linkurl: "http://php.net"
}, {
    text: "C",
    value: 150,
    linkurl: "http://drupal.org"
} ];

data.forEach(function(a) {
    a.text = a.text;
    a.value = +a.value;
    a.linkurl = a.linkurl;
});

x.domain(data.map(function(a) {
    return a.text;
}));

y.domain([ 0, d3.max(data, function(a) {
    return a.value;
}) ]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", "-.55em")
    .attr("transform", "rotate(-45)");

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("");

var bars = svg.selectAll("bar")
    .data(data)
    .enter()
    .append("rect")
    .style("fill", "steelblue")
    .attr("x", function(a) {
        return x(a.text);
    }).attr("width", x.rangeBand())
    .attr("y", function(a) {
        return y(a.value);
    }).attr("height", function(a) {
        return height - y(a.value);
    });

bars.on("click", function(a) {   
    window.location.href = a.linkurl;
});

＆＃13;

.axis {
   font: 10px sans-serif;
 }

   .axis path,
 .axis line {
   fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

＆＃13;

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

＆＃13;

链接在D3条形图中

1 个答案: