d3js做的图表怎么放在html中的指定位置啊
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了d3js做的图表怎么放在html中的指定位置啊相关的知识，希望对你有一定的参考价值。
用css更改不了位置啊，只能放在最左侧，有什么方法可以放在指定位置或者放到div中
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300);
var dataset = [250, 210];
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 20)
.attr("y", function (d, i) return i * 25;)
.attr("width", function (d) return d;)
.attr("height", 23);
</script>
一般js加载的元素放置在页面中的位置，有两种方法
1.一种是放在相应的容器里面，利用js动态加载进来，但是元素的位置是固定了的，就是在页面中容器原来放置在哪里，就只能放置在哪里，不过结合position可以动态地改变位置
<div id="div1">js加载内容
</div>
2.还有一种就是，js自己在body元素下生成一个容器，利用绝对定位或者固定定位，从而可以放在在页面的任何位置
<body><div style="position:absolute;top:0;left:0;">动态加载的js</div>
</body>追问
追问里放不代码，我在问题描述中放了一个简单的代码，我试了你的方法，还是不行，你看一下你能用什么方法改变他的位置吗，十分感谢！
追答你是要将图标整个放入这个html里面还是怎么样了，是要放在哪个位置了，可以具体说一下不
追问就是比如一个网页左边是这个图的描述，右边放着个图，但是我无论如何都移动不了这个图到正确的位置上，或者是放入div中，然后移动他，也不可以
参考技术A <!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Single Selection</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript" src="d3.v3.min.js"></script>
</head>
<body>
<div>
参考例子：https://zhidao.baidu.com/question/202786479126124805.html#
</div>
<div class="test" style="text-align:right"> <!-- 在这里可以设置图表在div中的位置，
然后你可以根据想要的位置来摆放div的位置就可以了-->
</div>
<script>
var svg = d3.select(".test")
.append("svg")
.attr("width", 300)
.attr("height", 300);
var dataset = [250, 210];
svg.selectAll("rect搜索")
.data(dataset)
.enter()
.append("rect")
.attr("x", 20)
.attr("y", function (d, i) return i * 25;)
.attr("width", function (d) return d;)
.attr("height", 23);
</script>
</body>
</html> 参考技术B 定义div的id,比如为id1,定义svg时用d3.select("#id1")而不是d3.select("body") 参考技术C 肯定可以改变位置的 只有可能你搞错而已追问
可以改变是肯定的，但是怎么改变呢，能教教我吗
jqgrid 怎么把行插入到指定位置
参考技术A <script>$(document).ready(function()
initPlsfList();
);
//初始化grid列表
function initPlsfList()
//缓存表列数组,key 为页面元素的name ，value 对应数据库中的字段
var cellArray = new Array();
cellArray["zoneID"] ="ZONE_ID";
cellArray["factorPG"] ="FACTOR_PG";
cellArray["factorQG"] ="FACTOR_QG";
cellArray["factorPL"] ="FACTOR_PL";
cellArray["factorQL"] ="FACTOR_QL";
cellArray["valid"] ="VALID";
var caseID = '$caseID';
$("#plsfList").jqGrid(
url:"<c:url value='/lfc/powerlsfactor/queryData?caseID="+caseID+"' />",
datatype: "json",
mtype:"POST",
height: "auto",
width: "auto",
colNames:[
'id',
"<fmt:message key='case.valid'/>",
"<fmt:message key='zone'/>",
"<fmt:message key='pasf'/>",
"<fmt:message key='pisf'/>",
"<fmt:message key='lasf'/>",
"<fmt:message key='lisf'/>",
'modeID'
],
colModel:[
name:'id',index:'id', width:100,hidden:true,
name:'valid',index:'valid', width:100,editable:true,
formatter:formatValid,
editable:true,edittype:'checkbox',
editoptions:value:'1:0',defaultValue:'1'
,
name:'zoneName',index:'zoneName', width:150,editable:true,
name:'factorPG',index:'factorPG', width:100,editable:true,
name:'factorQG',index:'factorQG', width:100,editable:true,
name:'factorPL',index:'factorPL', width:100,editable:true,
name:'factorQL',index:'factorQL', width:100,editable:true,
name:'caseID',index:'caseID', width:100,hidden:true,
],
rowNum:10,
rowList:[10,20,30],
pager: '',
cellEdit:true,
viewrecords: true,
jsonReader: repeatitems : false, id: "id" ,
viewsortcols:[false,'horizontal',false],
sortable:false,
sortorder:"asc",
sortname:"id",
multiselect: true,
cellurl:"<c:url value='/lfc/powerlsfactor/save'/>",
cellsubmit: 'remote',
gridComplete: function()
var $selecAll = $("#cb_plsfList");
var cb_title = "<fmt:message key='select.all' bundle='$commonResources'/>" ;
if($selecAll)
$selecAll.attr("title",cb_title);
//设置全选checkbox title
var rowIds = jQuery("#plsfList").jqGrid('getDataIDs');
for(var k=0; k<rowIds.length; k++)
var curRowData = jQuery("#plsfList").jqGrid('getRowData', rowIds[k]);
var curChk = $("#"+rowIds[k]+"").find(":checkbox");
//curChk.attr('title', curRowData.modeName); //给checkbox赋予额外的属性值
,
onSortCol:function(index,iCol,sortorder)
return false ;
,
ondblClickRow: function (rowid,iRow,iCol,e)
/*var $plsfList = $("#plsfList");
if (isRowNeedSave($plsfList))
showMessage("请先保存");
else
$("#operate").val("update");
newrowid = rowid ;
$plsfList.setGridParam(cellEdit:false);
$plsfList.jqGrid('editRow', rowid, true);
//确定按钮可用
$("#confirm_btn").attr("disabled",false);
*/
,
beforeSubmitCell:function(rowid, cellname, value, iRow, iCol)
//列提交前的拦截方法
var $plsfList = $("#plsfList") ;
var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>' ;
//设置列提交的url。updateCellName：要编辑的列名 ；updateCellValue ：是编辑的值
$editUrl = addParamToUrl($editUrl,'updateCellName',iCol == 3 ? cellArray['zoneID'] :cellArray[cellname]);
$editUrl = addParamToUrl($editUrl,'updateCellValue',iCol == 3 ? $("#zone_id").val():value);
//给jqgrid 从新设置cellurl 值
$plsfList.setGridParam(cellurl:$editUrl);
return false ;
,
afterEditCell:function(rowid, cellname, value, iRow, iCol)
//动态修改lie时，当列 变为可修改状态时，给列add一个button，且列中元素不可编辑，点击button 弹出一个模态窗口，可以选择元素 ，赋值给grid当前编辑列中单行表单域中.
$("#"+rowid+" input[type='checkbox']").attr("checked",value == "<fmt:message key='case.valid'/>" ? true:false);
if(iCol==3)
$("#irowNum").val(rowid);
var $data = $("#"+rowid +">td"); //获取这个行里所有的td元素，即：获取所有子元素
$zoneInput = $data.find("input").eq("1") ;
$zoneInput.css("width","100px");
$zoneInput.attr("disabled",true);
$zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />");
);
//grid添加新的一行
var newrowid ;
function addRow()
$("#operate").val("");
var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow");
var ids = jQuery("#plsfList").jqGrid('getDataIDs');
//获得当前最大行号（数据编号）
var rowid = Math.max.apply(Math,ids);
//获得新添加行的行号（数据编号）
newrowid = rowid+1;
var dataRow =
id: "",
valid:"",
zoneID:'',
factorPG:'',
factorQG:'',
factorPL:'',
factorQL:'',
caseID:''
;
//将新添加的行插入到第一列
$("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first");
//设置grid单元格不可编辑
$("#plsfList").setGridParam(cellEdit:false);
//设置grid单元格可编辑
$('#plsfList').jqGrid('editRow', newrowid, false);
//确定按钮可用
$("#confirm_btn").attr("disabled",false);
//给添加的列加选择按钮
var $zoneInput = $("#"+newrowid+"_zoneName");
$zoneInput.attr("disabled",true).css("width",100);
$zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />");
function insertPlsf()
var $plsfList = $("#plsfList") ;
var $operate = $("#operate").val();
//设置grid单元格可编辑
$plsfList.setGridParam(cellEdit:true);
//设置grid行不可编辑
//$plsfList.jqGrid('editRow', newrowid, false);
//拼接请求的url
var url = '<%=basePath%>'+"/lfc/powerlsfactor/save" ;
var $params = $plsfList.find("input[id^="+newrowid+"]");
var $check_val = $params.eq(0).is(':checked') ? 1:0;
url = addParamToUrl(url,'valid',$check_val);
url = addParamToUrl(url,'zoneID',$("#zone_id").val());
url = addParamToUrl(url,'factorPG',$params.eq(2).val());
url = addParamToUrl(url,'factorQG',$params.eq(3).val());
url = addParamToUrl(url,'factorPL',$params.eq(4).val());
url = addParamToUrl(url,'factorQL',$params.eq(5).val());
var $caseID = $("#caseID").val();
url = addParamToUrl(url,'caseID',$caseID);
$.ajax(url:url,type:"post",timeout:5000,
success:function(data)
showMessage(data);
reloadGrid();
);
//将新添加行号 初始为空
newrowid = '' ;
//确定按钮不可用
$("#confirm_btn").attr("disabled",true);
//格式zone列输出内容
function formatZone(cellvalue, options, rowObject)
if(cellvalue == 0)
return 0;
else if(cellvalue == 1)
return 1;
else if(cellvalue == 2)
return 2;
else
return 3;
function isRowNeedSave($jqgrid)
var $editTr = $jqgrid.find("tr[editable=1]") ;
var flag = false ;
if ( $editTr && $editTr.length > 0)
flag = true ;
return flag ;
function cancel()
reloadGrid();
//确定按钮不可用
$("#confirm_btn").attr("disabled",true);
//设置grid单元格可编辑
$("#plsfList").setGridParam(cellEdit:true);
//设置grid单元格可编辑
$('#plsfList').jqGrid('editRow', newrowid, true);
function fnCallDialogForEidt()
//获得当前行号（数据编号）
var returnValue = "";
returnValue = window.showModalDialog("<c:url value='/element/zone/query?caseID="+$("#caseID").val()+"' />",window,"");
if(returnValue==""||returnValue==null)
return;
var $plsfList = $("#plsfList");
var $params = $plsfList.find("input[id$='zoneName']");
var names = returnValue.split(",");
$params.eq(0).val(names[1]);
$("#zone_id").val(names[0]);
以上是关于d3js做的图表怎么放在html中的指定位置啊的主要内容，如果未能解决你的问题，请参考以下文章