d3 export svg image network failure error

hi sharad

I am given the bellow code for svg generated chart for demo of bar . If you tell clearly

That You want can try

>
<html>
<head>
<style>
.bar{
fill: blueviolet;
}
.highlight
{
fill:coral;
}
style>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js">script>
head>
<body>
<svg id="visualisation" style="background-color:cadetblue" width="1000" height="500">svg>
<script>
var data = [100, 200, 300, 350, 400, 250,450]
var width = 500, barHeight = 20, margin = 1;
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([100, 400]);
var svg = d3.select("#visualisation")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("stroke", "blue")
.attr("transform", function (d, i) {
return "translate(0," + i * barHeight + ")";
});
g.append("rect")
.attr("width", function (d) {
return scale(d);
})
.attr("class", "bar")
.attr("height", barHeight - margin)
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
g.append("text")
.attr("x", function (d) { return (scale(d)); })
.attr("y", barHeight / 2).attr("dy", ".35em")
.text(function (d) { return d; });
function onMouseOver(d, i) {
d3.select(this)
.attr('class', 'highlight');
}
function onMouseOut(d, i) {
d3.select(this)
.attr('class', 'bar');
}
script>
body>
html>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo7y ago
hi sharad

I am given the bellow code for svg generated chart for demo of bar . If you tell clearly
That You want can try
>
<html>

<head>
    <style>
        .bar{
            fill: blueviolet;
        }
        .highlight
        {
            fill:coral;
        }
    style>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js">script>
head>
<body>
    <svg id="visualisation" style="background-color:cadetblue" width="1000" height="500">svg>
    <script>
        var data = [100, 200, 300, 350, 400, 250,450]
        var width = 500, barHeight = 20, margin = 1;

        var scale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([100, 400]);

        var svg = d3.select("#visualisation")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);

        var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("stroke", "blue")
            .attr("transform", function (d, i) {
                return "translate(0," + i * barHeight + ")";
            });

        g.append("rect")
            .attr("width", function (d) {
                return scale(d);
            })
            .attr("class", "bar")
            .attr("height", barHeight - margin)
            .on("mouseover", onMouseOver)
            .on("mouseout", onMouseOut)
        g.append("text")
            .attr("x", function (d) { return (scale(d)); })
            .attr("y", barHeight / 2).attr("dy", ".35em")
            .text(function (d) { return d; });


        function onMouseOver(d, i) {
            d3.select(this)
                .attr('class', 'highlight');
        }
        function onMouseOut(d, i) {

            d3.select(this)
                .attr('class', 'bar');
        }
    script>
body>
html>