diff --git a/controllers/dataset.go b/controllers/dataset.go
index 0768db8..2f3572a 100644
--- a/controllers/dataset.go
+++ b/controllers/dataset.go
@@ -29,8 +29,9 @@ func (c *ApiController) GetDataset() {
 func (c *ApiController) GetDatasetGraph() {
 	id := c.Input().Get("id")
 	clusterNumber := util.ParseInt(c.Input().Get("clusterNumber"))
+	distanceLimit := util.ParseInt(c.Input().Get("distanceLimit"))
 
-	c.Data["json"] = object.GetDatasetGraph(id, clusterNumber)
+	c.Data["json"] = object.GetDatasetGraph(id, clusterNumber, distanceLimit)
 	c.ServeJSON()
 }
 
diff --git a/object/dataset_graph.go b/object/dataset_graph.go
index 3707b1b..08fac8c 100644
--- a/object/dataset_graph.go
+++ b/object/dataset_graph.go
@@ -15,8 +15,8 @@ func init() {
 	graphCache = map[string]*Graph{}
 }
 
-func GetDatasetGraph(id string, clusterNumber int) *Graph {
-	cacheId := fmt.Sprintf("%s|%d", id, clusterNumber)
+func GetDatasetGraph(id string, clusterNumber int, distanceLimit int) *Graph {
+	cacheId := fmt.Sprintf("%s|%d|%d", id, clusterNumber, distanceLimit)
 
 	g, ok := graphCache[cacheId]
 	if ok {
@@ -30,7 +30,7 @@ func GetDatasetGraph(id string, clusterNumber int) *Graph {
 
 	runKmeans(dataset.Vectors, clusterNumber)
 
-	g = generateGraph(dataset.Vectors)
+	g = generateGraph(dataset.Vectors, distanceLimit)
 	graphCache[cacheId] = g
 	return g
 }
@@ -65,9 +65,7 @@ func getNodeColor(weight int) string {
 	return fmt.Sprintf("rgb(%d,%d,%d)", myColor.R, myColor.G, myColor.B)
 }
 
-var DistanceLimit = 14
-
-func generateGraph(vectors []*Vector) *Graph {
+func generateGraph(vectors []*Vector, distanceLimit int) *Graph {
 	vectors = refineVectors(vectors)
 	//vectors = vectors[:100]
 
@@ -79,7 +77,7 @@ func generateGraph(vectors []*Vector) *Graph {
 			v1 := vectors[i]
 			v2 := vectors[j]
 			distance := int(getDistance(v1, v2))
-			if distance >= DistanceLimit {
+			if distance >= distanceLimit {
 				continue
 			}
 
@@ -94,7 +92,7 @@ func generateGraph(vectors []*Vector) *Graph {
 				nodeWeightMap[v2.Name] = v + 1
 			}
 
-			linkValue := (1*(distance-7) + 10*(DistanceLimit-1-distance)) / (DistanceLimit - 8)
+			linkValue := (1*(distance-7) + 10*(distanceLimit-1-distance)) / (distanceLimit - 8)
 			linkColor := "rgb(44,160,44,0.6)"
 			linkName := fmt.Sprintf("Edge [%s] - [%s]: distance = %d, linkValue = %d", v1.Name, v2.Name, distance, linkValue)
 			fmt.Println(linkName)
diff --git a/web/src/Dataset.js b/web/src/Dataset.js
index 653195a..574a978 100644
--- a/web/src/Dataset.js
+++ b/web/src/Dataset.js
@@ -46,6 +46,7 @@ class Dataset extends React.Component {
       strength: 20,
       distanceMax: 100,
       clusterNumber: 100,
+      distanceLimit: 14,
       selectedType: null,
       selectedId: null,
       selectedIds: [],
@@ -61,7 +62,7 @@ class Dataset extends React.Component {
   }
 
   getDatasetGraph() {
-    DatasetBackend.getDatasetGraph("admin", this.state.datasetName, this.state.clusterNumber)
+    DatasetBackend.getDatasetGraph("admin", this.state.datasetName, this.state.clusterNumber, this.state.distanceLimit)
       .then((graph) => {
         this.setState({
           graph: graph,
@@ -161,7 +162,9 @@ class Dataset extends React.Component {
           } type="inner">
             <Row>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
-                保持静止：
+                <span style={{verticalAlign: "middle"}}>
+                  保持静止：
+                </span>
               </Col>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
                 <Switch checked={this.state.enableStatic} onChange={(checked, e) => {
@@ -185,7 +188,9 @@ class Dataset extends React.Component {
             {/*</Row>*/}
             <Row>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
-                启用粗线：
+                <span style={{verticalAlign: "middle"}}>
+                  启用粗线：
+                </span>
               </Col>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
                 <Switch checked={this.state.enableBolderLink} onChange={(checked, e) => {
@@ -197,7 +202,9 @@ class Dataset extends React.Component {
             </Row>
             <Row>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
-                启用3D：
+                <span style={{verticalAlign: "middle"}}>
+                  启用3D：
+                </span>
               </Col>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
                 <Switch checked={this.state.enable3D} onChange={(checked, e) => {
@@ -221,7 +228,9 @@ class Dataset extends React.Component {
             {/*</Row>*/}
             <Row>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
-                扩散度：
+                <span style={{verticalAlign: "middle"}}>
+                  扩散度：
+                </span>
               </Col>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
                 <Slider value={this.state.strength} dots={true} min={0} max={1000} onChange={(value => {
@@ -236,7 +245,9 @@ class Dataset extends React.Component {
             </Row>
             <Row>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
-                最大距离：
+                <span style={{verticalAlign: "middle"}}>
+                  最大距离：
+                </span>
               </Col>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
                 <Slider value={this.state.distanceMax} dots={true} min={0} max={1000} onChange={(value => {
@@ -252,12 +263,14 @@ class Dataset extends React.Component {
           </Card>
           <Card style={{marginTop: "20px"}} size="small" title={
             <div>
-              聚类参数
+              聚类选项
             </div>
           } type="inner">
             <Row>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={8}>
-                算法：
+                <span style={{verticalAlign: "middle"}}>
+                  算法：
+                </span>
               </Col>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={16}>
                 <Select virtual={false} style={{width: '100%'}} value={"K-Means"} onChange={(value => {
@@ -275,7 +288,9 @@ class Dataset extends React.Component {
             </Row>
             <Row>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
-                聚类个数：
+                <span style={{verticalAlign: "middle"}}>
+                  聚类个数：
+                </span>
               </Col>
               <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
                 <InputNumber style={{width: "100%"}} min={2} max={this.state.graph?.nodes.length} step={1} value={this.state.clusterNumber} onChange={value => {
@@ -285,6 +300,20 @@ class Dataset extends React.Component {
                 }} />
               </Col>
             </Row>
+            <Row>
+              <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
+                <span style={{verticalAlign: "middle"}}>
+                  距离上限：
+                </span>
+              </Col>
+              <Col style={{marginTop: '5px', textAlign: 'center'}} span={12}>
+                <InputNumber style={{width: "100%"}} min={5} max={20} step={1} value={this.state.distanceLimit} onChange={value => {
+                  this.setState({
+                    distanceLimit: value,
+                  });
+                }} />
+              </Col>
+            </Row>
             <Row style={{textAlign: "center", paddingTop: '10px'}}>
               <Button style={{margin: 'auto'}} type="primary" onClick={() => {
                 this.setState({
diff --git a/web/src/backend/DatasetBackend.js b/web/src/backend/DatasetBackend.js
index b570cc6..b3b05aa 100644
--- a/web/src/backend/DatasetBackend.js
+++ b/web/src/backend/DatasetBackend.js
@@ -21,8 +21,8 @@ export function getDataset(owner, name) {
   }).then(res => res.json());
 }
 
-export function getDatasetGraph(owner, name, clusterNumber) {
-  return fetch(`${Setting.ServerUrl}/api/get-dataset-graph?id=${owner}/${encodeURIComponent(name)}&clusterNumber=${clusterNumber}`, {
+export function getDatasetGraph(owner, name, clusterNumber, distanceLimit) {
+  return fetch(`${Setting.ServerUrl}/api/get-dataset-graph?id=${owner}/${encodeURIComponent(name)}&clusterNumber=${clusterNumber}&distanceLimit=${distanceLimit}`, {
     method: "GET",
     credentials: "include"
   }).then(res => res.json());