Javascript 我怎样才能把我的图表放在页面中间呢？ 我试图把我的图表放在页面中间，但是我发现它有点困难。

另外，如何使工具提示悬停在蓝色条上，因为现在它显示在页面的角落中

可以帮助我把图表放在中间，并允许工具提示在图表中的蓝色条上悬停。< /P> 谢谢大家!

这是我的css：

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

#title {
    font-family: sans-serif;
    font-weight: bold; 
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}

.axis text {
    font-family: sans-serif;
    font-size: 14px;
}
#tooltip {
    position: absolute;
    text-align: center;
    width: 40px;
    height: auto;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
#tooltip.hidden {
    display: none;
}
#tooltip p {
    margin: 0;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
}

这是我的d3.js：

<script>
var margins = {
    top: 12,
    left: 150,
    right: 24,
    bottom: 24
},
legendPanel = {
    width: 0
},
width = 800 - margins.left - margins.right - legendPanel.width,
    height = 300 - margins.top - margins.bottom,
    dataset = [{
        data: [{
            month: 'Jan Sales',
            count: 35 
        }, {
            month: 'XMAS',
            count:5
        }
         ]
    }

    ],
    series = dataset.map(function (d) {
        return d.name;
    }),
    dataset = dataset.map(function (d) {
        return d.data.map(function (o, i) {
            // Structure it so that your numeric
            // axis (the stacked amount) is y
            return {
                y: o.count,
                x: o.month
            };
        });
    }),
    stack = d3.layout.stack();

stack(dataset);

var dataset = dataset.map(function (group) {
    return group.map(function (d) {
        // Invert the x and y values, and y0 becomes x0
        return {
            x: d.y,
            y: d.x,
            x0: d.y0
        };
    });
}),
    svg = d3.select('body')
        .append('svg')
        .attr('width', width + margins.left + margins.right + legendPanel.width)
        .attr('height', height + margins.top + margins.bottom)
        .append('g')
        .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'),
    xMax = d3.max(dataset, function (group) {
        return d3.max(group, function (d) {
            return d.x + d.x0;
        });
    }),
    xScale = d3.scale.linear()
        .domain([0, xMax])
        .range([0, width]),
    months = dataset[0].map(function (d) {
        return d.y;
    }),
    _ = console.log(months),
    yScale = d3.scale.ordinal()
        .domain(months)
        .rangeRoundBands([0, height], .5),
    xAxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom'),
    yAxis = d3.svg.axis()
        .scale(yScale)
        .orient('left'),
    colours = d3.scale.category10(),
    groups = svg.selectAll('g')
        .data(dataset)
        .enter()
        .append('g')
        .style('fill', function (d, i) {
        return colours(i);
    }),
    rects = groups.selectAll('rect')
        .data(function (d) {
        return d;
    })
        .enter()
        .append('rect')
        .attr('x', function (d) {
        return xScale(d.x0);
    })
        .attr('y', function (d, i) {
        return yScale(d.y);
    })
        .attr('height', function (d) {
        return yScale.rangeBand();
    })
        .attr('width', function (d) {
        return xScale(d.x);
    })
        .on('mouseover', function (d) {
        var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
        var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

        d3.select('#tooltip')
            .style('left', xPos + 'px')
            .style('top', yPos + 'px')
            .select('#value')
            .text(d.x);

        d3.select('#tooltip').classed('hidden', false);
    })
        .on('mouseout', function () {
        d3.select('#tooltip').classed('hidden', true);
    })

    svg.append('g')
        .attr('class', 'axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);

svg.append('g')
    .attr('class', 'axis')
    .call(yAxis);

svg.append('rect')
    .attr('fill', 'yellow')
    .attr('width', 160)
    .attr('height', 30 * dataset.length)
    .attr('x', width + margins.left)
    .attr('y', 0);

series.forEach(function (s, i) {
    svg.append('text')
        .attr('fill', 'black')
        .attr('x', width + margins.left + 8)
        .attr('y', i * 24 + 24)
        .text(s);
    svg.append('rect')
        .attr('fill', colours(i))
        .attr('width', 60)
        .attr('height', 20)
        .attr('x', width + margins.left + 90)
        .attr('y', i * 24 + 6);
});

</script>

var保证金={
前12名，
左：150，
右：24，
底数：24
},
传奇面板={
宽度：0
},
宽度=800-margins.left-margins.right-legendPanel.width，
高度=300-页边距.top-页边距.bottom，
数据集=[{
数据：[{
月份：'一月销售'，
计数：35
}, {
月份：“圣诞节”，
计数：5
}
]
}
],
series=dataset.map（函数（d）{
返回d.name；
}),
dataset=dataset.map（函数（d）{
返回d.data.map（函数（o，i）{
//构造它，使您的数字
//轴（堆叠量）为y轴
返回{
y:o.count，
x:o.month
};
});
}),
stack=d3.layout.stack（）；
堆栈（数据集）；
var dataset=dataset.map（函数（组）{
返回组.map（函数（d）{
//反转x和y值，y0变为x0
返回{
x:d.y，
y:d.x，
x0:d.y0
};
});
}),
svg=d3。选择（'body'）
.append（'svg'）
.attr（'width'，width+margins.left+margins.right+legendPanel.width）
.attr（'height'，height+margins.top+margins.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margins.left+'，'+margins.top+'）），
xMax=d3.max（数据集、函数（组）{
返回d3.max（组，函数（d）{
返回d.x+d.x0；
});
}),
xScale=d3.scale.linear（）
.domain（[0，xMax]）
.范围（[0，宽度]），
月份=数据集[0]。映射（函数（d）{
返回d.y；
}),
_=控制台日志（月），
yScale=d3.scale.ordinal（）
.域名（个月）
.rangeRoundBands（[0，高度]，.5），
xAxis=d3.svg.axis（）
.scale（xScale）
.orient（“底部”），
yAxis=d3.svg.axis（）
.刻度（yScale）
.orient（‘左’），
颜色=d3.比例.类别10（），
groups=svg.selectAll（'g'）
.数据（数据集）
.输入（）
.append（'g'）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
}),
rects=组。选择全部（'rect'）
.数据（功能（d）{
返回d；
})
.输入（）
.append（'rect'）
.attr（'x'，函数（d）{
返回xScale（d.x0）；
})
.attr（'y'，函数（d，i）{
返回y刻度（d.y）；
})
.attr（高度），功能（d）{
返回yScale.rangeBand（）；
})
.attr（'width'，函数（d）{
返回x刻度（d.x）；
})
.on（'mouseover'，函数（d）{
var xPos=parseFloat（d3.select（this.attr（'x'））/2+width/2；
var yPos=parseFloat（d3.select（this.attr（'y'））+yScale.rangeBand（）/2；
d3.选择（“#工具提示”）
.style（'left'，xPos+'px'）
.style（'top'，yPos+'px'）
.选择（“#值”）
.案文（d.x）；
d3.选择（“#工具提示”）.classed（'hidden'，false）；
})
.on（'mouseout'，函数（）{
d3.选择（“#工具提示”）.classed（'hidden'，true）；
})
append（'g'）
.attr（'类'，'轴'）
.attr（'transform'，'translate（0'，+height+'））
.呼叫（xAxis）；
append（'g'）
.attr（'类'，'轴'）
.呼叫（yAxis）；
append（'rect'）
.attr（'填充'，'黄色'）
.attr（'宽度'，160）
.attr（'height'，30*dataset.length）
.attr（'x'，宽度+页边距。左）
.attr（'y'，0）；
系列。forEach（函数（s，i）{
append（'text'）
.attr（'填充'，'黑色'）
.attr（'x'，宽度+边距。左侧+8）
.attr（'y'，i*24+24）
.文本；
append（'rect'）
.attr（'填充'，颜色（一））
.attr（'width'，60）
.attr（'height'，20）
.attr（'x'，宽度+边距。左侧+90）
.attr（'y'，i*24+6）；
});

这是我的工具提示html：

<div id="tooltip" class="hidden">
    <p>
       <span id="value">100</span>
    </p>
</div>

100

<代码> > p>将一个块放置在页面的中间，可以使用非常简单的CSS设置。当您希望图表处于中间位置时，将下列内容添加到CSS 

    #tooltip {
      margin: 0 auto
    }

要向类或id添加悬停函数，可以使用以下css。只需将值更改为相应的id或类

#example:hover {
background-color: blue;
}

希望这有帮助
 我试过了，没用。如果你不介意的话，你能帮我把这个放到JS提琴里吗？@dave，你为什么不在你的问题中把代码放到JS提琴里，然后寻找答案的人可以修复它，然后把新链接发回来。你会发现这样你会得到更多的答案。请定义“在页面中间”。另外，为什么您有一个
jQuery
和一个
nvd3
标记？就像在网页的中心一样，我在我的页面中使用了jQuery的一些元素。我希望它是有意义的，当我说我希望我的图表在页面的中间时，你使用jQuery的事实并不意味着你应该用jQuery标记这个问题。根据这种推理，每个D3问题都应该有HTML标记。关于中心，你是指垂直方向吗？水平的？两个？啊，谢谢你的澄清，我的意思是这两个图表都在页面的中间。好的，让我解释一下情况：这与D3无关。在代码中，您只需选择
并添加SVG。我建议您发布另一个问题，带有HTML、CSS和Javascript标记，询问如何：1。获取窗口高度，2.获取窗口宽度，3.使用SVG创建一个div，使其上下左右边距相同