Question

今天我正在学习D3.js

我从研究这个内容开始：

https://bost.ocks.org/mike/circles/

大部分内容似乎易于理解和遵循。

但是我在退出（）工作时遇到了问题。

我理解我可以使用exit（）强制DOM中的元素与JS数组中的值同步。

所以我写了一些代码来演示这个想法，我的代码失败了。

我想知道如何重写我的JS，以便exit（）强制我的DOM中的元素与JS数组中的值同步。

$checker = array();
$profileArray = array();
while ($row = mysqli_fetch_assoc($result))
{
    $profileArray[$row['ID']]['GalleryImages'][] = $row['GalleryImage'];
    if(!in_array($row['ID'], $checker))
    {
        while (list ($key, $value) = each($row))
        {
            if($key != 'GalleryImage')
            {
                $profileArray[$row['ID']][$key] = $value;
            }
        }
        $checker[] = $row['ID'];
    }
}

foreach ($profileArray as $row)
{
    $ID = $row['ID'];
    $FullName = $row['FullName'];
    $Email = $row['Email'];
    $JobTitle = $row['JobTitle'];
    $Bio = $row['Bio'];
    $Photo = $row['Photo'];
    $GalleyImages = $row['GalleryImages'];

    if (isset($Photo) && !empty($Photo))
    {
        $ProfileImage = "$Photo";
    }
    else
    {
        $ProfileImage = "avatar.jpg";
    }

    $output .= "
    <div class='container yep team-wrap'>
      <div class='row'>        
        <div class='col-md-6'>
            <img class='img-responsive' src='cdn/assets/artist/$ProfileImage'>
        </div>
    <div class='col-md-6'>
      <strong>$FullName<br>$JobTitle</strong>
         <br>
        <p>$Bio</p>
       <a href='mailto:$Email' class='btn btn-info'>Contact Me</a>
    </div> 
</div>";

    //End of info row
    $output .= "<br /><br /><br />";

    //Start Gallery Row
    $output .= "
        <div class='row'>
         <div class='col-md-12'>
        <div id='gallery-slider' class='slider responsive'>";

    if(!empty($GalleyImages))
    {
        foreach ($GalleyImages as $img)
        {
            //Display this row as many times as needed by data in this row.
            $output .= "<img class='img-responsive' src='cdn/assets/gallery/$img'>";
        }
    }
    else
    {
        $output .= "HTML THAT YOU WANNA DISPLAY instead of images";
    }

    $output .= "
                </div>
            </div>
        </div>
    </div>";
}
echo $output;

Answer 1

在您的示例中，svg1本身就是一个“输入”选择。

如果您打破链条，您的代码就可以正常工作，只需要svg1创建SVG的选项：

  var svg1 = d3.select('body')
      .append('svg')
      .attr('id','svg1')
      .attr('width',800);

svg1.selectAll("circle")
      .data([0, 1, 2])
    .enter()
      .append("circle")
      .attr("cy", 60)
      .attr("cx", function(d, i) { return i * 100 + 30 })
      .attr("r",  function(d)    { return 5+5*d })
  
  var mycircles_a = svg1.selectAll("circle")
    .data([99, 88])
  
  mycircles_a.exit().remove()

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

您没有正确保存对svg1的引用。

https://jsfiddle.net/y008c61L/

var svg1 = d3.select('body')
      .append('svg')
      .attr('id','svg1')
      .attr('width',800);
svg1.selectAll("circle")
//...

在D3.js我对exit（）的行为感到困惑

2 个答案: