Question

我在html文件中使用Div元素创建了一个按钮。该按钮应该通过网格线链接到我的d3.js文件。在我的JS文件中，我创建了所谓的用户友好的水平和垂直网格线，它们应该引导用户在页面上的其他可视化位置，然后在使用后关闭。

问题是我一般都是JavaScript和D3的新手，我似乎无法弄清楚如何将我的div按钮链接到SVG创建的网格线以创建隐藏/显示效果即使在严厉之后通过堆栈流量和谷歌。我尝试了不同的变化和想法但没有成功。

我的按钮代码

 <body>
  <div id="option">
    <input name="updateButton" 
           type="button" 
           value="On/Off" 
           onclick="updateGrid()" 
           />

</div>
  </body>

我的网格线代码

var width  = 1500,
    height = 800,
    colors = d3.scale.category20();
var svg = d3.select('body')
  .append('svg')
  .attr('oncontextmenu', 'return false;')
  .attr('width', width)
  .attr('height', height);
//vertical lines
Ver= svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("x1", function (d) {
    return d * 80;
})
    .attr("x2", function (d) {
    return d * 80;
})
    .attr("y1", function (d) {
    return 0;
})
    .attr("y2", function (d) {
    return 800;
})
    .style("stroke", "#eee");

// horizontal lines

hor= svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("y1", function (d) {
    return d * 60;
})
    .attr("y2", function (d) {
    return d * 60;
})
    .attr("x1", function (d) {
    return 0;
})
    .attr("x2", function (d) {
    return 1500;
})
    .style("stroke", "#eee");

Answer 1

希望我的代码有所帮助：

＆＃13;

// I add a div container instead of the <body> tag
var svg = d3.select("#container")
  .append('svg')
  .attr('oncontextmenu', 'return false;')
  .attr('width', 1500)
  .attr('height', 800)
  .style("border", "1px solid #ccc")

// initial
redraw("horizontal");

// I prefer 'd3.select("#option input").on("click", func)' style
function updateGrid(event){
    var btu = d3.select(event.target);

    if(btu.attr("value") === "On"){
        btu.attr("value", "Off");
        redraw("vertical");
    }else{
        btu.attr("value", "On");
        redraw("horizontal");
    }
}

function redraw(type){
    var data = d3.range(26), update, enter;
    // there are three stage of binding data: update, enter and exit.
    // But I just need to define two stage in your case.

    update = svg
            .selectAll("line")
            // all line to be marked with a specific value
            .data(data, function(d){ return d; });
    enter = update
            .enter()
            .append("line")
            .attr({
                x1: 0, x2: 0,
                y1: 0, y2: 0,
                stroke: "black",
                "stroke-width": 1
            });
    
    if(type === "horizontal"){
        update
            .transition()
            .duration(1000)
            .attr({
               x1: 0, x2: 1500,
               y1: function(d){ return d * 60; },
               y2: function(d){ return d * 60; } 
            })
    }else{
        update
            .transition()
            .duration(1000)
            .attr({
               x1: function(d){ return d * 60; },
               x2: function(d){ return d * 60; },
               y1: 0, y2: 800 
            })
    }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="option">
    <input name="updateButton" type="button" value="On" onclick="updateGrid(event)"  />
</div>

<div id="container"></div>

＆＃13;

Answer 2

有不同的方法可以达到你想要的效果。

我的建议是，既然你已经在使用D3，就不要在线调用函数。而不是那样，使用D3本身来听取按钮点击：

var toggle = true;
d3.select("input").on("click", function() {
      d3.selectAll("line").style("opacity", +(toggle = !toggle))
})

我只是在0和1之间切换不透明度。如果你不知道（因为你说过你是JavaScript和D3的新手），+true是1而+false是0（那＆＃39;为什么我使用一元加号），!toggle反转布尔值。

这是一个演示，使用您的代码进行一些小的更改：

＆＃13;

var width = 1500,
  height = 800,
  colors = d3.scale.category20();

var svg = d3.select('body')
  .append('svg')
  .attr('oncontextmenu', 'return false;')
  .attr('width', width)
  .attr('height', height);

//vertical lines
var ver = svg.selectAll(null).data(d3.range(26)).enter()
  .append("line")
  .attr("x1", function(d) {
    return d * 80;
  })
  .attr("x2", function(d) {
    return d * 80;
  })
  .attr("y1", function(d) {
    return 0;
  })
  .attr("y2", function(d) {
    return 800;
  })
  .style("stroke", "#666")
  .style("shape-rendering", "crispEdges");

// horizontal lines

var hor = svg.selectAll(null).data(d3.range(26)).enter()
  .append("line")
  .attr("y1", function(d) {
    return d * 60;
  })
  .attr("y2", function(d) {
    return d * 60;
  })
  .attr("x1", function(d) {
    return 0;
  })
  .attr("x2", function(d) {
    return 1500;
  })
  .style("stroke", "#666")
  .style("shape-rendering", "crispEdges");

var toggle = true;

d3.select("input").on("click", function() {
  d3.selectAll("line").style("opacity", +(toggle = !toggle))
})

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="option">
  <input name="updateButton" type="button" value="On/Off" />
</div>

＆＃13;

使用按钮D3隐藏/显示网格线

2 个答案: