如果为D3

Question

我正在为svg容器创建if语句，以建立下一个/后退按钮UI。我在创建一条语句（如果是的话）（1）执行特定功能时遇到麻烦。

例如

if (d3.select("svg").attr("id") == "#chart") function updateData1() {
    ...
}

Answer 1

我不确定您的意思到底是什么，但是通常我认为您要问的内容应该是这样的：

if (d3.select("svg").attr("id") == "#chart")
{
    updateData1();
}

在其他地方定义了updateData1（），可能与以下文件位于同一文件中：

function updateData1()
{
     ...
}

如果您发布更多方案，则可能更容易解决问题。

Answer 2

这里是如何实现这种逻辑的示例。 如果每个场景的内容都非常不同，则可以删除svg内容。请记住，如果您要修改svg内容，则始终可以使用输入更新退出模式https://bl.ocks.org/mbostock/3808218。

const width = 200
const height = 200

const svg = d3.select('#app') // add main svg to #app
               .append('svg') 
               .attr('width', width)
               .attr('height', height)
               
let scene = 0 // keep track of scene counter
// button event 
d3.select('#nextBtn').on('click', function(){ 
  scene = nextEvent(svg, scene) //call event and update scene
})

function nextEvent(svg, scene){
  if(scene === 0){
    svg.select('*').remove()  // clean svg content
    svg.append('rect')
       .attr('width', 50)
       .attr('height', 50)
       .attr('x', 10)
       .attr('y', 10)
  }
  if(scene === 1){
    svg.select('*').remove() 
    svg.append('circle')
       .attr('r', 50)
       .attr('cx', 85)
       .attr('cy', 85)
  }
  if(scene === 2){
    svg.select('*').remove() 
    svg.append('rect')
       .attr('width', 90)
       .attr('height', 90)
       .attr('x', 50)
       .attr('y', 50)
  }
  return (scene + 1)%3 // return counter up to3 scenes 
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<button id="nextBtn"> next </button>
<div id="app"></div>