CODEWITHSUNDEEP
cssd3.jssvgbackgroundrect
Dave
Dave

Reputation: 19110

How do I set the background class of my d3 SVG rect?

I'm using d3 v4. I have a line chart, in which I'm able to roll over my chart and have a little info box appear -- https://jsfiddle.net/rgw12x8d/18/ . Currently the background of the info box is yellow, which I set like so

  var rect = focus.append("rect")
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("fill", "yellow");

But let's say I want the background to be a class, specifically a class I've created that has a gradient as a background ...

.infoBoxBg {
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */  
}

How do I properly set the background of my info box other than setting the fill color?

Upvotes: 0

Views: 1212

Answers (1)

Mark
Mark

Reputation: 92440

If you want to use things like gradient backgrounds with SVG, you can, but you need to do it the SVG way. SVG has gradients and you can apply them in css, but you need to define them in SVG. Once you do that, you can use css to apply them, or swap them out with :hover etc. Here's a super-simple example that might help and should be easy to use with D3. 

    rect.rec {
      fill: url("#grad");
    }
    rect.rec:hover {
      fill: url("#grad_rev")
    }
<div>

  <svg width="200", height="200">
    <defs>
    <linearGradient id="grad">
      <stop offset="5%" stop-color="#d33" />
      <stop offset="95%" stop-color="#100" />
    </linearGradient>
    <linearGradient id="grad_rev">
        <stop offset="5%" stop-color="#100" />
        <stop offset="95%" stop-color="#d33" />
      </linearGradient>
    </defs>
    <rect class="rec" width="100", height="100">
    
    </rect>
  </svg>

</div>

Here' a more complete snippet using a D3 transition to set the stop color on the SVG gradient. It's a little more difficult than simple CSS but very flexible and gives you things you can't easily get with css like traditions between gradients.

    var margin = {top: 20, right: 30, bottom: 30, left: 40},        
        width = 200 - margin.left - margin.right,
        height = 200 - margin.top - margin.bottom,
        padding = 0.3;

    var chart = d3.select(".chart")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    chart.append("rect")
        .attr("class", "rec")
        .attr("height", "150px")
        .attr("width", "150px")
        .on("mouseover", handleMouseOver)
        .on("mouseout", handleMouseOut)

    function handleMouseOver(d, i){
        d3.select('#red-stop')
        .transition()
        .duration(600)
        .attr('stop-color', 'blue' )
    }
    function handleMouseOut(d, i){
        d3.select('#red-stop')
        .transition()
        .duration(600)
        .attr('stop-color', 'red' )
    }
        rect.rec {
            fill: url("#grad");
        }
<script src="https://d3js.org/d3.v4.min.js"></script>

<svg class="chart">
    <linearGradient id="grad">
        <stop id="red-stop" offset="5%" stop-color="red" />
        <stop offset="95%" stop-color="#100" />
    </linearGradient>
    <linearGradient id="grad_rev">
        <stop offset="5%" stop-color="#100" />
        <stop offset="95%" stop-color="#d33" />
    </linearGradient>
          
  </svg>

Upvotes: 1

Related Questions