Edge on interactive d3 visualization

Question

I'm very new to d3 and I found this code for some visualization I'm working on.

I ommited most of the data to fit in this page more smoothly.

Basically, what I want to do is make the edges of the bars appear only for the selected variable when you click on it, right now, whenever you select one variable the edges for the others are shown so it looks horrible. Much help would be appreciated! Thanks!

<!DOCTYPE html>
<meta charset="utf-8">
<style>
text{
    font-size:12px;
}
.mainBars rect{
  shape-rendering: auto;
  fill-opacity: 0;
  stroke-width: 0.5px;
  stroke: rgb(0, 0, 0);
  stroke-opacity: 0;
}
.subBars{
    shape-rendering:crispEdges;
}
.edges{
    stroke:black;
    stroke-width: .4px:  
    fill-opacity:0.5;
}
.header{
    text-anchor:middle;
    font-size:18px;
    font-weight: bold;
    line-height: 1.5;
}
line{
    stroke:red;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://vizjs.org/viz.v1.1.0.min.js"></script>
<script>

var data=[['CA', 'Wheat', 2441900000.0, 2441900000.0],
          ['CO', 'Alfalfa', 4410000000.0, 4410000000.0],
          ['KS', 'Sorghum', 13300000000.0, 13300000000.0],
          ['TX', 'Sorghum', 12500000000.0, 12500000000.0],              
          ['WY', 'Safflower', 5655522.245, 5655522.245]];

//Create array below, one color per state.
//There's probably a programmatic way to use a d3 color palette
//to just automatically do it instead of listing 51 colors individually.
//e.g. d3.scale.category10(), also
// http://stackoverflow.com/questions/20847161/how-can-i-generate-as-many-colors-as-i-want-using-d3
var color ={KS:"#3366CC", WY:"#DC3912",  CA:"#FF9900", CO:"#109618", TX:"#990099", IA:"#0099C6"};
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);

svg.append("text").attr("x",250).attr("y",70)
    .attr("class","header").text("Crop Acreage by State - 2015");

//svg.append("text").attr("x",750).attr("y",70)
//  .attr("class","header").text("Duplicate");

var g =[svg.append("g").attr("transform","translate(150,100)")
        ,svg.append("g").attr("transform","translate(650,100)")];

var bp=[ viz.bP()
        .data(data)
        .min(12)
        .pad(0.5)
        .height(600)
        .width(300)
        .barSize(35)
        .fill(d=>color[d.primary])      
//  ,viz.bP()
//      .data(data)
//      .value(d=>d[3])
//      .min(12)
//      .pad(1)
//      .height(600)
//      .width(200)
//      .barSize(35)
//      .fill(d=>color[d.primary])
];

[0,1].forEach(function(i){
    g[i].call(bp[i])

    g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("State");
    g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("Crop");

    g[i].append("line").attr("x1",-100).attr("x2",0);
    g[i].append("line").attr("x1",200).attr("x2",300);

    g[i].append("line").attr("y1",700).attr("y2",700).attr("x1",-100).attr("x2",0);
    g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);

    g[i].selectAll(".mainBars")
        .on("mouseover",mouseover)
        .on("mouseout",mouseout);

    g[i].selectAll(".mainBars").append("text").attr("class","label")
        .attr("x",d=>(d.part=="primary"? -30: 30))
        .attr("y",d=>+6)
        .text(d=>d.key)
        .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));

    g[i].selectAll(".mainBars").append("text").attr("class","perc")
        .attr("x",d=>(d.part=="primary"? -100: 100))
        .attr("y",d=>+6)
        .text(function(d){ return d3.format("0.0%")(d.percent)})
        .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
});

function mouseover(d){
    [0,1].forEach(function(i){
        bp[i].mouseover(d);

        g[i].selectAll(".mainBars").select(".perc")
        .text(function(d){ return d3.format("0.0%")(d.percent)});
    });
}
function mouseout(d){
    [0,1].forEach(function(i){
        bp[i].mouseout(d);

        g[i].selectAll(".mainBars").select(".perc")
        .text(function(d){ return d3.format("0.0%")(d.percent)});
    });
}
d3.select(self.frameElement).style("height", "800px");
</script>
</body>
</html>

Answer 1

remove the .edges style

.edges{
    stroke:black;
    stroke-width: .4px;
    fill-opacity:0.5;
}

viz animates the fill-opacity instead of opacity

Edge on interactive d3 visualization

Question

1 answers

solution1
0 2018-10-10 17:49:57

Edge on interactive d3 visualization

Question

1 answers

solution1 0 2018-10-10 17:49:57

solution1
0 2018-10-10 17:49:57