问题描述:

I am creating a D3 bar chart using below code .

<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>

And want to create a link on each bar.. for that I am using the code . It is working fine when I am using same URL for each bar but doesn't

for different URl for each bar...

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;

});

网友答案:

You have to bind the click listener to the bars (rectangles) instead of 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;
});

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;
});
.axis {
   font: 10px sans-serif;
 }

   .axis path,
 .axis line {
   fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
相关阅读:
Top