我在D3中写的最基本的东西可以看到一些东西

时间:2013-03-07 18:34:14

标签: ruby-on-rails-3.2 d3.js

我只是想开始学习D3并在Rails中有一个项目来玩它。

我有一个运行轨道服务器 - localhost - 我已经在index.html中写了这个:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body { font: 12px Arial;}
    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }
    .axis path, .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1; shape-rendering: crispEdges;
    }
</style>
<body>
<p> Hi i am here</p>
<script src="http://d3js.org/d3.v3.min.js"></script>


</body>

现在我可以在那里输入并在浏览器中查看内容的最基本的东西是什么?

1 个答案:

答案 0 :(得分:1)

以下是绘制圆圈的示例代码:

<script>
    d3.selectAll("body") //select the body
        .append("svg") // add an svg element to the body
        .append("circle") // add a circle to the svg element
        .attr("r", 40) // add attributes to the circle
        .attr("cx", 50)
        .attr("cy", 50)
</script>

这是一个jsFiddle,代码“已完成”:http://jsfiddle.net/Bd7HA/


如果你不是指图形的东西,你也可以这样做,这基本上会在“body”标签内写下“Hello World”。

<script>
    d3.selectAll("body").text("Hello World")
</script>

jsFiddle:http://jsfiddle.net/chrisJamesC/Bd7HA/5/