Question

我是D3.JS的新手，我对创建svg块的方式感到非常惊讶，我发现压倒性的，我会解释自己的需要，例如编写像这样的HTML div块{{3 }}

使用HTML和CSS它非常容易和简单，代码可以重复使用，我发现我的自我定义项目由attem通过Append和静态x和y将它们附加到根svg以及添加字形的一些奇怪的方法，它给了我类似的东西：

svg.attr({ width: 500, height: 500 });

    var rectangle = svg.append("rect").
    attr("width", 300).
    attr("height", 100).attr("fill", "#3b3e3f");


    var rectangleIndexes = svg.append("rect").
    attr("width", 50).
    attr("height", 100).attr("fill", "#303233");

    var edit = svg.append("rect").
    attr("width", 30).
    attr("height", 30).
    attr("x", 10).
    attr("y", 10).
    attr("fill", "#454a4d");

    var editBtn = svg.append("svg:foreignObject")
        .attr("width", 20)
        .attr("height", 20)
        .attr("y", "15px")
        .attr("x", "18px")
        .append("xhtml:span")
        .attr("class", "control glyphicon glyphicon-pencil")
        .attr("style", "color :#fff");

etc...

有没有其他方法可以做到这一点，因为我习惯了html / css，如果我们可以在svg中导入html代码或更简单和可重用的东西，那将会很棒。

感谢您的帮助。

Answer 1

第一个问题，如果你想要HTML / CSS，为什么要将它们附加到SVG？

第二件事，d3并不意味着你不能使用CSS。如果您不想要，则不必使用内嵌样式。只需为他们分配一个班级。

第三，你错过了d3的观点。这一切都是为了通过数据驱动你的显示器（3 ds d ata d 撕裂 d ocuments）。这里的数据将是每个“块”的数组元素。

这样的事情（请原谅我可怕的CSS）：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <style>
      .my-block {
        width: 100px;
        height: 100px;
        background-color: steelblue;
        box-shadow: 10px 10px 5px #888888;
        float: left;
        margin: 20px;
        position: relative;
      }
      .icon {
          position:absolute;
          top: 80px;
          right: 5px;
          color: #fff;
      }
      .text {
          position:absolute;
          top: 40px;
          left: 25px;
          color: #fff;
      }
    </style>
  </head>

  <body>
    <script>
    var data = [
      {
        name: "block 1",
        icon: "glyphicon-pencil"
      },{
        name: "block 2",
        icon: "glyphicon-film"
      },{
        name: "block 3",
        icon: "glyphicon-off"
      },{
        name: "block 4",
        icon: "glyphicon-user"
      }
    ];
    
    var body = d3.select('body');
    
    var divs = body.selectAll('.my-block')
      .data(data)
      .enter()
      .append('div')
      .attr('class', 'my-block')
      
    divs.append('span')
      .text(function(d){
        return d.name;
      })
      .attr("class", "text");
      
    divs.append('span')
      .attr("class", function(d){
        return "icon control glyphicon " + d.icon;
      });
    
    </script>
  </body>

</html>

在D3.JS中创建项目块的最佳方法是什么

1 个答案: