d3.js-图的位置

Question

I want to present my d3 graph with a beamer. 我想用投影仪展示我的d3图。 But when I use the beamer my graph drops to the right side of my website. 但是，当我使用投影仪时，我的图表会落在我网站的右侧。 But it is just my d3 graph. 但这只是我的d3图。 The other content is still at the same position. 其他内容仍处于相同位置。

Do you have a hint for me? 你对我有提示吗？ It is important. 这很重要。 Thank you. 谢谢。

Here is my code for the position. 这是我的职位代码。 I know I should use % or px for the margin. 我知道我应该使用％或px作为保证金。 But when I tried this, the graph doesnt appear. 但是当我尝试这样做时，该图没有出现。

<div style="width: 1000px; margin-left: 23%;">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
                <script>


var margin = {top: 20, right: 30, bottom: 127, left: 430},
    width = 1400 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom;

My whole code: 我的整个代码：

<style>
.bar {
    fill: steelblue;
}

.bar:hover {
    fill: brown;
}

.axis text {
    font: 10px sans-serif;
}

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.x.axis path {
    display: none;
}
</style>
<body marginwidth="0" marginheight = "0">
<div style="width: 1000px; margin-left: 23%;">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
                <script>


var margin = {top: 20, right: 30, bottom: 127, left: 430},
    width = 1400 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom;

var xScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var yScale = d3.scale.linear()
    .range([(height), 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(10);


var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("class", "chart");

var chart = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("getdata.php", function(error, data) {
  xScale.domain(data.map(function(d) { return d.text; }));
  yScale.domain([0, d3.max(data, function(d){ return d.count; })]);




  chart.selectAll(".bar")
        .data(data)
        .enter()

        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return xScale(d.text); })
        .attr("y", function(d) { return yScale(d.count); })
        .attr("height", function(d) { return height - yScale(d.count); })
        .attr("width", xScale.rangeBand())

  chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-65)" );


  chart.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y",6 )
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Value");

});

function type(d) {
  d.count = +d.text;
  return d;
}

</script>
            </div>
</body>

Answer 1

Okay guys. 好的，伙计们。 I know whats wrong. 我知道怎么了 I append the chart to the body. 我将图表附加到正文中。

var svg = d3.select("body")

I just changed it to my div and now its working. 我只是将其更改为我的div，现在可以使用了。

Thank you guys. 感谢大伙们。

d3.js-图的位置

问题描述

1 个解决方案

解决方案1
0 2015-09-05 11:10:37

d3.js-图的位置

问题描述

1 个解决方案

解决方案1 0 2015-09-05 11:10:37

解决方案1
0 2015-09-05 11:10:37