Sandeep Patil Sandeep Patil - 4 months ago 8
jQuery Question

CSS is not getting applied to SVG

I have created a svg through D3 but CSS is not getting applied properly

I am looking for two svg one below the other so that i have given margin-left and margin-top but no luck

I am trying in chrome its not working but in fiddle the same is working

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="D3lib/d3.js"></script>
<style type="text/css">
.svg_class {
margin-left:0px;margin-top:70px;background-color:green;
}
.svg_class1 {
margin-left:0px;margin-top:0px;background-color:green;
}
</style>
</head>
<body>

<script type="text/javascript">

// One way
var width = 500,
height = 50;

var dataset = [5,10,15,20,25];

var svg = d3.select("body")
.append("svg")
.attr("id","svg_1")
.attr("width",width)
.attr("height",height)
.attr("class","svg_class1");

var circle = d3.select("#svg_1")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle");


circle.attr("cx",function(d,i){
return (i * 50) + 25;
})
.attr("cy",height/2)
.attr("r",function(d){
return d;
});

// Other way
var w = 500, h = 50;

var data = [5,10,15,20,25,30];

d3.select("body")
.append("svg")
.attr("id","svg_2")
.attr("width",w)
.attr("height",h)
.attr("class","svg_class");

d3.select("#svg_2")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx",function(d,i){
return (i * 50) + 25;
})
.attr("cy",h/2)
.attr("r",function(d){
return d;
});


</script>

</body>




here is fiddle link

Answer

May be the issue is with SVG class is not able to find as you applying but I am not sure.

I request you update your class add property position:fixed and try

second option

instead of .svg_class1 use svg.svg_class1 like below

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script type="text/javascript" src="D3lib/d3.js"></script>
    <style type="text/css">
        svg.svg_class1 {
            margin-left:0px;margin-top:70px;background-color:green;position: fixed;            
        }
        svg.svg_class {
            margin-left:0px;margin-top:0px;background-color:orange;position: fixed;
        }
    </style> 
 </head>
 <body>

    <script type="text/javascript">

        // One way
        var width = 500,
            height = 50;

        var dataset = [5,10,15,20,25];

        var svg = d3.select("body")
                    .append("svg")
                    .attr("id","svg_1")
                    .attr("width",width)
                    .attr("height",height)
                    .attr("class","svg_class");

        var circle = d3.select("#svg_1")
                        .selectAll("circle")
                        .data(dataset)
                        .enter()
                        .append("circle");  


        circle.attr("cx",function(d,i){
                    return (i * 50) + 25;
                })
                .attr("cy",height/2)
                .attr("r",function(d){
                    return d;
                });

        // Other way
        var w = 500, h = 50;

        var data = [5,10,15,20,25,30];

        d3.select("body")
            .append("svg")
            .attr("id","svg_2")
            .attr("width",w)
            .attr("height",h)
            .attr("class","svg_class1");

        d3.select("#svg_2")
            .selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx",function(d,i){
                return (i * 50) + 25;
            })
            .attr("cy",h/2)
            .attr("r",function(d){
                return d;
            });


    </script>

</body>

I have updated your fiddle