个人中心
gpt4 book ai didi

javascript - wordpress 页面底部的 d3.js 图表渲染

转载 作者：行者123 更新时间：2023-11-30 11:36:17 24 4
gpt4 key购买 nike

为什么我的js图表渲染在页面底部，而不是body中？我已经在我的站点中使用了很多这些，没有任何问题，但是这个似乎不想去需要的地方。想法？

提前致谢!

www.wcsddata.net/data-topics/jttest/

<center><!DOCTYPE html>
<meta charset="utf-8">
<style>
text{
    font-size:12px;
}
.mainBars rect{
  shape-rendering: auto;
  fill-opacity: 0;
  stroke-width: 0.5px;
  stroke: rgb(0, 0, 0);
  stroke-opacity: 0;
}
.subBars{
    shape-rendering:crispEdges;
}
.edges{
    stroke:none;
    fill-opacity:0.5;
}
.header{
    text-anchor:middle;
    font-size:16px;
}

</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://vizjs.org/viz.v1.1.0.min.js"></script>
<script>
var data=[['Lite','CA',16,0],
['Small','CA',1278,4],
['Medium','CA',27,0],
['Plus','CA',58,0],
['Grand','CA',1551,15],
['Elite','CA',141,0],
['Lite','AZ',5453,35],
['Small','AZ',683,1],
['Medium','AZ',862,0],
['Grand','AZ',6228,30],
['Lite','AL',15001,449],
['Small','AL',527,3],
['Medium','AL',836,0],
['Plus','AL',28648,1419],
['Grand','AL',3,0],
['Lite','CO',13,0],
['Small','CO',396,0],
['Medium','CO',362,0],
['Plus','CO',78,10],
['Grand','CO',2473,32],
['Elite','CO',2063,64],
['Medium','DE',203,0],
['Grand','DE',686,2],
['Elite','DE',826,0],
['Lite','KS',1738,110],
['Small','KS',12925,13],
['Medium','KS',15413,0],
['Small','GA',2166,2],
['Medium','GA',86,0],
['Plus','GA',348,3],
['Grand','GA',4244,18],
['Elite','GA',1536,1],
['Small','IA',351,0],
['Grand','IA',405,1],
['Small','IL',914,1],
['Medium','IL',127,0],
['Grand','IL',1470,7],
['Elite','IL',516,1],
['Lite','IN',43,0],
['Small','IN',667,1],
['Medium','IN',172,0],
['Plus','IN',149,1],
['Grand','IN',1380,5],
['Elite','IN',791,23],
['Small','FL',1,0],
['Grand','FL',1,0],
['Small','MD',1070,1],
['Grand','MD',1171,2],
['Elite','MD',33,0],
['Plus','TX',1,0],
['Small','MS',407,0],
['Medium','MS',3,0],
['Grand','MS',457,2],
['Elite','MS',20,0],
['Small','NC',557,0],
['Medium','NC',167,0],
['Plus','NC',95,1],
['Grand','NC',1090,5],
['Elite','NC',676,6],
['Lite','NM',1195,99],
['Small','NM',350,3],
['Medium','NM',212,0],
['Grand','NM',1509,8],
['Lite','NV',3899,389],
['Small','NV',147,0],
['Medium','NV',455,0],
['Plus','NV',1,1],
['Grand','NV',4100,16],
['Lite','OH',12,0],
['Small','OH',634,2],
['Medium','OH',749,0],
['Plus','OH',119,1],
['Grand','OH',3705,19],
['Elite','OH',3456,25],
['Small','PA',828,2],
['Medium','PA',288,0],
['Plus','PA',141,0],
['Grand','PA',2625,7],
['Elite','PA',1920,10],
['Small','SC',1146,2],
['Medium','SC',212,0],
['Plus','SC',223,4],
['Grand','SC',1803,6],
['Elite','SC',761,8],
['Small','TN',527,0],
['Medium','TN',90,0],
['Grand','TN',930,4],
['Elite','TN',395,1],
['Lite','ME',7232,58],
['Small','ME',1272,0],
['Medium','ME',1896,0],
['Plus','ME',1,0],
['Grand','ME',10782,33],
['Elite','ME',1911,3],
['Small','VA',495,0],
['Medium','VA',32,0],
['Plus','VA',7,0],
['Grand','VA',1557,12],
['Elite','VA',24,0],
['Small','WA',460,1],
['Plus','WA',88,3],
['Grand','WA',956,3],
['Small','WV',232,0],
['Medium','WV',71,0],
['Grand','WV',575,2],
['Elite','WV',368,3]
];
var color ={Elite:"#3366CC", Grand:"#DC3912",  Lite:"#FF9900", Medium:"#109618", Plus:"#990099", Small:"#0099C6"};
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);
svg.append("text").attr("x",250).attr("y",70)
    .attr("class","header").text("Sales Attempt");
svg.append("text").attr("x",750).attr("y",70)
    .attr("class","header").text("Sales");
var g =[svg.append("g").attr("transform","translate(150,100)")
        ,svg.append("g").attr("transform","translate(650,100)")];
var bp=[ viz.bP()
        .data(data)
        .min(12)
        .pad(1)
        .height(600)
        .width(200)
        .barSize(35)
        .fill(d=>color[d.primary])      
    ,viz.bP()
        .data(data)
        .value(d=>d[3])
        .min(12)
        .pad(1)
        .height(600)
        .width(200)
        .barSize(35)
        .fill(d=>color[d.primary])
];  
[0,1].forEach(function(i){
    g[i].call(bp[i])
    g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("Channel");
    g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("State");
    g[i].append("line").attr("x1",-100).attr("x2",0);
    g[i].append("line").attr("x1",200).attr("x2",300);
    g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",-100).attr("x2",0);
    g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);
    g[i].selectAll(".mainBars")
        .on("mouseover",mouseover)
        .on("mouseout",mouseout);
    g[i].selectAll(".mainBars").append("text").attr("class","label")
        .attr("x",d=>(d.part=="primary"? -30: 30))
        .attr("y",d=>+6)
        .text(d=>d.key)
        .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
    g[i].selectAll(".mainBars").append("text").attr("class","perc")
        .attr("x",d=>(d.part=="primary"? -100: 80))
        .attr("y",d=>+6)
        .text(function(d){ return d3.format("0.0%")(d.percent)})
        .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
});
function mouseover(d){
    [0,1].forEach(function(i){
        bp[i].mouseover(d);
        g[i].selectAll(".mainBars").select(".perc")
        .text(function(d){ return d3.format("0.0%")(d.percent)});
    });
}
function mouseout(d){
    [0,1].forEach(function(i){
        bp[i].mouseout(d);
        g[i].selectAll(".mainBars").select(".perc")
        .text(function(d){ return d3.format("0.0%")(d.percent)});
    });
}
d3.select(self.frameElement).style("height", "800px");
</script>

最佳答案

问题是你的 JS 选择器，你需要选择 #content .
改变
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);
致:
var svg = d3.select("#content").append("svg").attr("width", 960).attr("height", 800);
这将在所需区域显示您的图表。

为了使图表居中，您需要更改宽度和高度:
var svg = d3.select("#content").append("svg").attr("width", 600).attr("height", auto);
然后创建一个
<div id="mycenterdiv" style="text-align:center; width: 100%;"> </div>
在您的 wordpress 页面中，然后定位该 div(更改选择)
var svg = d3.select("#mycenterdiv").append("svg").attr("width", 600).attr("height", auto);

关于javascript - wordpress 页面底部的 d3.js 图表渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44291794/

24 4 0
文章推荐： javascript - 如何在 Chai 中使用 include？
文章推荐： javascript - 类型错误 : Failed to construct 'PasswordCredential' : 'id' must not be empty
文章推荐： javascript - "php://input"json ajax 请求返回字符串
文章推荐： javascript 遍历对象数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com